Use the Fact and Figures component to communicate key numerical data in a way that is immediately scannable and impactful. The component transforms raw numbers into a structured visual format that allows users to quickly absorb and compare related metrics, without reading dense prose or scanning tables.
The component is intentionally constrained in what it holds - short values, brief labels, and concise descriptions. Its impact lies in focus and clarity, not comprehensiveness.
Do's
- use for closely related statistics that share a common theme or context, so comparisons feel meaningful rather than arbitrary
- if using icons, aim for a representative one for each item, that supports the subject
- if using icons, ensure they are all visually consistent in style and weight
- keep labels concise, ideally aiming for a single word. Use no more than two. Labels anchor the metric. Users must understand them instantly
- limit the description where possible, prioritise the most essential supporting content
- apply consistent capitalisation across all fields, a mix of styles across items looks untidy, creates unnecessary visual noise and potentially undermines credibility
- if including a 'view all' link, ensure the label accurately describes the destination or action (e.g. 'Navigate to original source' rather than 'See more')
Don'ts
- do not mix metrics from unrelated themes - this creates potential confusion about what is being compared and why
- do not use long or complex numbers that require significant cognitive effort to parse. Round or abbreviate values appropriately (e.g. '2.4M' or 2.4 million, instead of '2,400,000').
- ensure any abbreviations are clearly understandable in context
- avoid loosely related icons - each icon should reinforce the meaning of the information
When to use
-
use when a page needs to communicate the scale or significance of an initiative at a glance
- a small set of headline statistics presented in this format creates immediate engagement and credibility
-
use on pages that introduce a topic, programme, or report. This component creates impact and gives users a quick orientation before they explore deeper content
-
use within a single list when all the metrics belong to the same theme (e.g. environmental impact, programme reach, etc.), as the component frames them as a coherent set rather than isolated data
When not to use
- do not use this component as a substitute for a data table if users need to compare multiple attributes, precise figures, or data across different dimensions
- do not use if users may need exact figures, to compare multiple attributes, or to explore data in detail. Instead, use a Table component