The Statistics Block enables you to display statistical value with description.
A new ‘Statistics’ block has been created to improve the authoring experience of the component, and this will be replacing the ‘Content Statistics Block’ in the CMS. We encourage you to use the new component going forward as we will be removing the old version.
In the past, we had multiple similar stat block components with small variations between the standard and layout builder pages. To optimise site performance, simplify maintenance, and streamline the user experience, these components have been merged into a single stats block.
-
Customisable Number and Pictogram Colours: Editors can now customise the colour of the numbers/pictograms instead of the backgrounds. This ensures that coloured stats remain accessible and do not clash with a selected section background colour.
-
Animation: Editors can enable numbers animation for increased visual engagement
-
Responsive Design: The new stats block accommodates a wider range of stat lengths by automatically resizing and rearranging itself based on the content.
-
Unlimited Stats: The enhanced flexibility removes the previous limit on the number of stats in a block (though we still recommend keeping the number reasonable).
Guidelines
Do:
- Provide context and brief descriptions to explain each statistic.
-
Ensure data sources are accurate and up to date.
-
Pair statistics with pictograms to visually enhance understanding.
Don't:
-
Overload users with too many statistics—focus on three or fewer to maintain impact.
-
Use raw data without context or explanations, as this can confuse customers.
Adding a Statistics block on a page
Style: you can select from the drop-down selection. The drop-down options are:
- Brand dark
- Text Dark
- Brand supplementary
The statistics block will always display on a white background.
Example of how each style can look respectively:
Icon (pictogram): you can select from a predetermined list.
Value:
- You can enter a static number into the Value field. No character limit. The field accepts alpha-numeric with special characters.
- You can select the dataset that contains the data that you want to display by ticking the ‘Show value from a dataset’ checkbox. These datasets need to be configured by a developer before use.
- You can animate your statistic by ticking the checkbox to turn on the number animation.
Unit (optional): you can add a unit value to the Item value, for example, km, m, %, etc.
Label: you can add a label text which will display below the value.
Description (optional): you can add a description which will display below the label.
Footnote Indicator (optional): you can add a footnote which will display as superscript next to the Label.
Ability to add multiple statistics: you can add multiple Statistics by selecting 'Add statistic'. There is no limitation on the number of statistics you can add however, we recommend keeping the number reasonable.
Disclaimer (optional): you add a disclaimer which will appear at the bottom of the block.
Live agency examples
You can also see how agencies have applied the component below:
Need any more help?
If you have any questions, or require assistance with anything mentioned on this article, submit a request via the webform.