Stat
A big tabular number over a small label. A row of them divides with hairlines on wide screens.
Examples
Stats
12,480Active users
98.2%Uptime
€48kMRR +12.4%
Single
128Pages published
Anatomy
.stats | Optional auto-fit grid of stats. From 48rem each stat after the first draws a hairline on its start edge. |
> .stat | One figure. Stacks its two children. |
> b | The number: large, light, tabular. |
> span | The label: small and muted. May hold a .delta. |
Accessibility
- The number is read before its label ("12,480 Active users"). Keep that order in the markup; the visual order follows it.
- Abbreviated figures such as
€48kare read literally. Write the full value in the label, or in.sr-onlytext, when precision matters.