Stat banner
Experimental full-bleed inverse section coordinating an optional eyebrow, large heading, centred subhead, labelled numeric callouts, and an optional flat Card for consumer-owned inline emphasis.
Experimental · Composition
Example
Open the standalone example. Static HTML rendered from the Default Storybook story, with generated tokens and the component's own CSS.
When to use
A short, evidence-led page statement needs a few scannable values and a compact supporting paragraph on an inverse surface.
Not for: Dense or comparative data, a CTA-led hero, or decorative numbers with no defensible source. Third-party trademarked product names or unapproved claims must never be hardcoded into a consuming project's copy without the same disclaimer and approval treatment established by that project's product datasheets.
Parameters
| Name | Type | Required | Default |
|---|---|---|---|
eyebrow | string | No | — |
heading | string | Yes | — |
subhead | string | Yes | — |
stats | { value: string; label: string }[] | Yes | — |
highlight | string | ReactNode | No | — |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | No | 2 |
Tokens and dependencies
Tokens: font-primary, color-black, color-bg-inverse-hover, color-text-inverse, color-text-inverse-muted, color-highlight, spacing-0, spacing-2, spacing-4, spacing-6, spacing-12, spacing-16, spacing-24, container-reading-max, text-xs, text-sm, text-4xl, text-5xl, weight-semibold, weight-bold, leading-tight, leading-snug, tracking-caps.
Builds on: section, container, heading, text, card.
Source
Canonical contract: components/stat-banner/SPEC.md. React binding: components/stat-banner/react/StatBanner.tsx. Css binding: components/stat-banner/stat-banner.css.