Skip to content
Jewel

Stat

The key numbers in a report or dashboard: a small uppercase label and a large semibold value, in the same Inter, with no color on the number.

CSS
css/components/stat.css

01 — Variants

Hero

One headline figure per page, at least 48px.

Rides this year
2.1M
Across 148 stations, January to September 2026

Stacked

The default: label above value, four across on wide screens and two on phones.

Stations
148
Bikes in the fleet
1,000
Members
12.4K
Up a third since January
Average trip
14min

Inline

.stat--inline puts the value first and the label beside it.

Bikes available at peak hours
96%
Neighborhoods added this year
6
Including the waterfront

With a sparkline

A tiny trend line under the value. See Chart.

Members
12.4K
CO₂ avoided
198t

02 — Usage

Use it for

  • Three to eight numbers that matter most.
  • Values written as they should be read: “40+”, “3.2M”.
  • .stat__unit for %, K, M and units; .stat__note for one line of context.

Avoid

  • Color on the number to mean good or bad. Say it in the note.
  • More than one hero per page.

03 — Accessibility

Notes

  • A real <dl>, so each label and value is read as one fact.