Lattice

Components Statement

big-number

Statement Canvas Prose

Single oversized number as the focal claim.

Open in Playground

Use to make one metric land. The number should be the headline — supporting text is one short caption. The whole slide is the chart.

hero-numbermetricpitch

When to use

  • One metric carries the slide. When the audience needs to remember exactly one number from this part of the deck. The whole slide is the chart — no surrounding context, no comparisons, no axes.
  • Headline that earns the canvas. Reach for big-number when the metric is the argument: cost reduced by 4×, audience reach grew 92%, time-to-decision dropped from 14 days to 4. One claim, one canvas.
  • Eyebrow names the metric class. The inline-code eyebrow contextualizes the number ("Audience recall", "Q3 revenue", "Latency p99"). The number is the value; the eyebrow is the label.

When not to use

  • Multiple metrics on one slide. Two big numbers on one canvas dilute both. Use stats for a row of three metrics or kpi for a grid of four; reserve big-number for genuinely solo claims.
  • Caption longer than one line. If the caption needs a sentence to explain, the number isn't carrying the slide. Either trim the number's claim or move to content where prose has room.
  • Decorative numbers without an argument. "99.99% uptime" by itself is a boast, not a claim. Big-number works when the number is the answer to a question the audience came in with.

Authoring

<!-- _class: big-number -->

`Optional eyebrow`

- 92%
  - of the audience remembers a single number from a deck.

Slots

SlotSelectorRequiredDescription
eyebrow p > code no Optional label above the number.
number ul > li:first-child yes First list item: the giant number.
caption ul > li:first-child > ul > li no One-line caption below the number (nested bullet).

Anatomy

┌─────────────────────────────────────────┐
│  header                                 │
│  EYEBROW                                │
│                                         │
│                 ┌─────┐                 │
│                 │ 42× │                 │
│                 └─────┘                 │
│                                         │
│      Caption explains the number.       │
│  footer                           1/19  │
└─────────────────────────────────────────┘