Support the page structure
On about pages and reports to highlight quantitative outcomes
Templates
Stats
Quantitative summary blocks for highlighting metrics, KPIs, and outcome figures.
Keep the layout consistent
On dashboards as a quick at-a-glance KPI summary
Use it intentionally
When metrics need interaction — use a data table or chart instead
3 columns
Three side-by-side stats centred on the page.
4 columns
Four side-by-side stats for denser numeric summaries.
5 columns
Five-column stats — use sparingly on wider viewports.
6 columns · right-aligned
Six-column right-aligned stats grouping for a compact panel.
8 columns · right-aligned
Eight-column right-aligned stats for the densest summaries.
When to use
- On about pages and reports to highlight quantitative outcomes
- On dashboards as a quick at-a-glance KPI summary
- When numeric values reinforce a narrative section
When not to use
- When metrics need interaction — use a data table or chart instead
- When the trend matters more than the snapshot — use a chart
Keyboard support
Use the SGDS components inside the stats pattern so keyboard behaviour stays predictable.
Check focus order and action placement in the surrounding page context, especially when the pattern groups multiple interactive elements together.
Tab order
- Move focus into the pattern.
- Navigate through interactive elements in visual order.
- Confirm any revealed or supporting content remains reachable.
- Continue to the next interactive element on the page.
TabShift+TabEnterSpaceHave suggestions or feedback?
Share them with us on Slack → #ask-sgds-v3
Found a bug or issue?
Report it on GitHub Issues → sgds/templates/stats