Components
Stat cards
Stat cards
Label-over-value tile used inside stat grids on entity detail pages. An uppercase eyebrow label sits above a primary value — text, mono-tabular numeric, or any child content like a badge.
Canonical
- Price
- £325,000
- SDLT estimate
- £6,250
- Tenure
- Freehold
- Status
- Awaiting
The everyday quote/transaction header strip. Tabular on monetary values so digits column-align across rows.
Variants
3 variants- Tenure
- Freehold
Text
value="Freehold"
- Price
- £325,000
Tabular numeric
tabular
- Status
- Awaiting
Slotted content
child <koala-badge>
States
2 states- Price
- £325,000
Populated
- SDLT estimate
- —
Empty
Use an em-dash for missing values
Props
3 attributes| Attribute | Values | Notes |
|---|---|---|
| label | string | Required. Uppercase eyebrow above the value. |
| value | string | Plain text value. Ignored when child content is supplied. |
| tabular | — | Switches the value to tabular-nums. Use on every money or count value. |
Do & don't
- Price
- £325,000
- SDLT estimate
- £6,250
Do
Use
tabular on every money or count value so digits column-align across rows.
- Price
- £325,000
- SDLT estimate
- £6,250
Don't
Don't leave money values on proportional digits. The columns won't line up and the eye has to do the work.