STAT TILE: A KPI figure with label, optional trend delta and context line
VARIANTS: Value tones (warning | danger) | Delta tones (positive | negative | neutral) | Compact (sm)

The standard way to show a headline number — applications received, places remaining, response rate. Carrier-agnostic: put it inside a .tw-card-body for the Data Listing KPI strip, or bare inside any panel. Delta tones follow meaning, not arrow direction — pair the tone with an icon and text so colour is never the only indicator.

KPI Strip (Data Listing usage)

Canonical usage: a grid of cards above the table — tw:grid tw:grid-cols-2 tw:lg:grid-cols-4 tw:gap-4, each tile inside a .tw-card-body.

Applications received 1,284 12% vs last year
Offers accepted 312 4% vs last year
Places remaining 18 of 240 for September 2027
Awaiting review 57 oldest waiting 9 days
<div class="tw-card"><div class="tw-card-body tw-stat-tile"><span class="tw-stat-tile-label">…</span><span class="tw-stat-tile-value">1,284</span></div></div>

Trend Deltas — Tone Follows Meaning

Meaning, not direction: "unread messages up 40%" is a negative even though the arrow points up. Choose -positive / -negative / -neutral by whether the change is good news; the arrow icon carries the direction.

Enquiry conversions 64% 6 pts vs last term
Unread messages 142 40% this week
Average review time 2.4 days unchanged
<span class="tw-stat-tile-delta tw-stat-tile-delta-negative"><i class="fa-solid fa-arrow-up"></i> 40% this week</span>

Compact (Sidebars & Drawers)

Compact: add .tw-stat-tile-sm to the tile for dense sidebars and drawers — the value drops one size, everything else holds.

Open day bookings 96 of 120 capacity
Forms in progress 41 8 this week
<div class="tw-stat-tile tw-stat-tile-sm">…</div>