use UI

Stat Tile

Also called KPI tile, metric card, big number, scorecard

A small block presenting one measurement with its label and enough context to interpret it.

Example

Active projects

1,284 active projects

up 12.4%

vs last month

Weekly signups

318 weekly signups

down 4.1%

vs last week

Median build time

42 seconds median build time

down 18.0%

vs last week

Reading order, as announced

  • Active projects · 1,284 active projects · up 12.4% vs last month
  • Weekly signups · 318 weekly signups · down 4.1% vs last week
  • Median build time · 42 seconds median build time · down 18.0% vs last week

The third tile is the one worth studying: its arrow points down and its colour is green, because a shorter build is better. Direction and judgement are two different things, and only one of them belongs in the colour.

When to use it

  • A handful of headline numbers should be readable before anyone scrolls — the top strip of a dashboard.
  • The number is checked repeatedly, so it needs to be found in the same place every time.
  • The comparison matters as much as the value: this week against last, actual against target.

When not to

  • The number only makes sense as a series. A single figure hides the shape — use a chart.
  • There are more than about six of them. Past that they stop being headlines and become a table with worse alignment.
  • The tile would need a paragraph to explain it. That is a card, or a chart with a caption.

Trade-offs

  • The size hierarchy does the work: the number is read first, everything else on demand.
  • Cheap to scan in a row, which is why dashboards open with them.
  • Carries its own comparison, so “is this good?” is answered in place.
  • Strips away all context that is not printed on it — a spike and a data outage look identical.
  • Invites vanity metrics, because a number that is easy to draw is not necessarily worth watching.
  • The delta is easy to mislabel: “+12%” compared with what is a question every tile has to answer explicitly.

Accessibility

What this pattern needs in order to work for everyone.

Keyboard
  • A tile is content, not a control. If it links to a detail view, it is one tab stop with a name that includes the metric — not “View”.
  • Never make the number itself focusable just to hang a tooltip on it; put the explanation in the tile.
Roles and state
  • Order the DOM the way it should be read: label, then value, then change. Visual order can differ, but the reading order is what a screen reader announces.
  • Direction must not rest on colour. Pair the tint with a sign, an arrow, and a word — “up 12.4%” survives greyscale and colour blindness.
  • Format the number for reading, not for parsing: `aria-label="1,284 active projects"` beats a bare “1284” when the visual uses abbreviations like 1.3k.
  • A sparkline beside the value is decoration when the number is already text — mark it `aria-hidden` rather than describing every point.
Focus
Nothing takes focus on its own. If a tile is a link, the whole tile is the target, not a small chevron in its corner.

In the wild

  • Stripe Dashboard — Value, comparison period and a sparkline in one block, with the period spelled out rather than implied.
  • Vercel Analytics — Four tiles across the top, each linking to the full breakdown of that metric.