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.

<koala-stat-card>

Canonical

Price: £325,000
SDLT estimate: £6,250
Tenure: Freehold
Status: Awaiting

<dl class="grid grid-cols-2 sm:grid-cols-4 gap-x-6 gap-y-4">
    <koala-stat-card label="Price" value="@Model.Price" tabular />
    <koala-stat-card label="SDLT estimate" value="@Model.SdltEstimate" tabular />
    <koala-stat-card label="Tenure" value="@Model.Tenure" />
    <koala-stat-card label="Status">
        <span koala-badge="Warning">Awaiting</span>
    </koala-stat-card>
</dl>

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>

Slotted content — omit value and slot child content (e.g. a badge) instead.

<koala-stat-card label="Status">
    <span koala-badge="Warning">Awaiting</span>
</koala-stat-card>

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.