stats — Lattice component

stats

EvidenceStackStructure

Row of 3–5 stat tiles, each with a big number and a label.

Open in Playground

Use for at-a-glance metric rows — quarterly results, headline KPIs. Each tile reads as Big Number + caption.

dashboardmetricpercentage

When to use

  • Three to five headline metrics. Quarterly results, pilot outcomes, year-end summary — anywhere a small set of independent numbers tells the story together. Each tile reads as a big-number in miniature.
  • Numbers are the headline. Lead with the number, follow with a one-line caption. The tile is for the metric and a label, not for explanation; if the caption wants a sentence, use kpi or split-panel metric instead.
  • Independent metrics, not parts of a whole. Stats rows are for headline KPIs that don't sum to anything — close rate, recall rate, dollars saved, days cut. For part-to-whole breakdowns reach for piechart.

When not to use

  • Six or more tiles. Past five tiles the row compresses and the numbers shrink below boardroom legibility. Split into two rows or move to kpi where the dashboard grid gives each metric its own card.
  • Tiles with no number. If a tile is mostly prose with a small number, the visual hierarchy inverts and the row reads as a list. Stats is for bold-number + caption — anything more belongs in cards-grid.
  • Status framing without pills. If each metric needs a target, a trend, and a status indicator, you're authoring a dashboard, not a stats row. Move to kpi, which carries that vocabulary.

Common mistakes

  • A stat's number has no nested caption bullet beneath it. A bare number still renders as the tile's big display number (the lead auto-bolds and is styled hero-sized regardless of nested content) — but with no nested caption there's no label under it. Nest a bullet directly beneath each number for its caption.
  • Writing the subtitle/eyebrow line as plain text instead of inline code. Stats' subtitle DOES change styling depending on backtick-wrapping: a backtick-wrapped, code-only paragraph adjacent to the heading gets lifted into the masthead and picked up by the shared eyebrow/subtitle rule (secondary color, message size); plain unwrapped text instead stays in the body and matches stats' own generic paragraph rule (label color, body size) — a visibly different color and size. Wrap it in backticks for the masthead treatment.

Authoring

<!-- _class: stats -->

`Impact · Pilot Results`

## Six months of results across four product teams.

`Measured against pre-framework baseline, same teams, same market conditions.`

1. 73%
   - faster close
2. 4.2×
   - signal recall
3. $1.2M
   - prevented losses
4. −18d
   - avg cycle time

Slots

SlotSelectorRequiredDescription
titleh2yesSlide heading framing the metrics.
subtitlep > codenoOptional inline-code paragraph (eyebrow before the h2, or caption after it). Styled by the generic > p/> em rule, not a dedicated p > code rule.
tilesol > liyesOne li per stat tile, authored as an ordered list (1.). The lead is the number (it renders in display type automatically — no **…** needed); the caption is a nested bullet beneath it: 1. 73% - faster close The number still renders big with no nested caption, but the tile has no label under it — always nest a caption.

Anatomy

┌─────────────────────────────────────────┐
│  header                                 │
│            Stats row heading            │
│                                         │
│    42×          87%          3.2k       │
│   growth      uptake        users       │
│                                         │
│                                         │
│  footer                           1/19  │
└─────────────────────────────────────────┘

Related

  • big-numberone number is enough to carry the slide
  • kpimetrics need targets, trends, and status pills
  • split-panelone focal KPI with a paragraph of supporting prose
  • piechartthe numbers are parts of a whole, not independent
  • progressthe metrics are completion percentages across workstreams