StatTrio.
A tone-owning section with an optional header over a `<dl>` of three or four equal stat cells, divided by hairline rules that flip from horizontal to vertical at 768px. Each cell is an optional jade rule + mono kicker, a `clamp(48px,6vw,88px)` tabular display value, and a 14px label — with an opt-in count-up on the value.
When to use
Use a StatTrio as the proof beat of a page: three or four headline numbers that anchor a claim, in a band of their own. It brings its own section padding, container, tone and (optionally) heading, so drop it between two content sections rather than nesting it. Reach for a FeatureColumns metric row when each number needs a card and a paragraph around it.
By the numbers
What the audit finds
- $300M+
- Overcharges clawed back for customers
- 98.4%
- Invoices audited automatically
- 12
- Supported out of the box
Recovered
Coverage
Carriers
- $300M+
- Overcharges clawed back for customers
- 98.4%
- Invoices audited automatically
- 12
- Supported out of the box
Recovered
Coverage
Carriers
The grid has no gap: the cells butt together and a 1px hairline does all the separating — a top
border when stacked, a left border from 768px. Values inherit the section foreground and carry
no colour of their own; jade is reserved for the 1px × 24px rule, the kicker, and the solid
header chip. tone="ink" is a jade-deep band, not a black one. Pass countTo on a stat and its value becomes a 1400ms count-up from zero, with value still required as the no-JS fallback.