Demo component
Example #1
Section: Full-width
Colour: Brand light / dark / supplementary
Example description
By default, the % symbol displays.
Example description
When disclaimer is added, it displays under the ring component.
Example #2
Section: 3/4 centred
Colour: Brand light
Only % values up to 100 may be entered. The number may have 1 decimal point only, for example, 50.9.
Text here to complement the ring
This text can further expand on the key statistic that is being highlighted above. You could include further statistics, reference material or research information that supports or expands on the above statistic.
Example #3
Section: Halves
Colour: Brand supplementary
Compare 2 figures over time.
of people participated in the example project in 2017.
of people participated in the example project in 2023.
Example #4
Section: Thirds - works best without an item description.
Colour: Brand light / dark / supplementary
Text in a small container reduces the size of the ring on desktop