Stat card
A compact tile showing one number. The unit of measurement on every overview page.
Default
Label · value · delta. The value is the focal point — 28 px sans, tabular.
Today's revenue
$ 2,816.40
▲ 12.4% vs Tue avg
Receipts
147
▲ 8 more than avg
Avg basket
$ 19.16
▼ $ 1.40 vs target
Tones
A tonal background turns the card into an emphasis tile. Used sparingly — usually for one card per row.
Outstanding
$ 184k
Brand
Collected
91.1%
Success
In arrears
12 accounts
Danger
With sparkline
A small trend line on the right tells the operator if the number is moving in the right direction.
Daily revenue
$ 2,816
▲ 12 %
Avg basket
$ 19.16
▼ 4 %
In a row
The canonical stat row at the top of an overview — 4 cards, equal width.
Today’s pours
2.84 kg
14% vs target
In dispatch
4.20 kg
Shipment SH-2841
Awaiting settlement
8.94 kg
3 batches
YTD revenue
$ 8.42 M
6.2 % YoY
Anatomy
| Property | Value | Notes |
|---|---|---|
| label | 11 / 1, 0.08 em, upper | --text-muted |
| value | 700 28 / 1 | Tabular-nums always |
| delta | 500 12 / 1.3 | Tonal — success / danger / muted |
| padding | 16 × 18 px | — |
Do & don't
Do
Always include a delta. A number with no context is half the value.
Don't
Use a chart instead. Stat cards are for the single most important number; charts go in their own panel.
Do
Keep the value to 4–6 characters when possible. Long numbers compress to "$ 184 k".
Don't
Animate the number counting up. Operators read it once.