Stat hero
The opener block on every portal overview: one large brand-tinted lead number, then a row of secondary stats. Parent uses it for "Total due", Owner for "Today's revenue", Gold for "Pours today", Student for "Grade average".
Canonical hero-with-one-lead.
Per audit-reuse D-3, b-stat-hero is the canonical "one lead + N secondary tiles" surface. For individual KPI tiles, use b-stat-card. The legacy b-kpi-grid wrapper is deprecated.
Default
One lead, three secondaries. The lead reads first by colour and size; the secondaries sit on the system canvas.
Parts
| Property | Value | Notes |
|---|---|---|
| lead background | linear-gradient(135°, --brand → --brand-deeper) | Portal can override --brand to tint to its own theme |
| lead value | 700 32 / 1.05, tabular-nums | Letter-spacing -0.02 em for headline density |
| secondary value | 700 20 / 1, tabular-nums | Half the size of the lead, white-on-surface |
| lead glow | radial overlay top-right | White at 18% opacity — adds depth without a shadow |
| row gap | 12 px | Lead → row · same as card-to-card gap |
| columns | 3 desktop, 2 phone | Drops to 2 below 600 px |
Do & don't
Pick the lead number deliberately. It's the answer to "what should the operator know in the first second?".
Use two lead cards. The whole point is one focal stat — competing lead cards cancel each other out.
Tint the lead to the portal brand. Owner is dark ink, Gold is amber, Parent is brand blue — same parts, different palette.
Stack more than 4 secondaries. Past four the eye loses the grid and the lead loses its weight.
Accessibility
- The lead value is the page's focal stat but not its
<h1>. The H1 is the page title; the hero is a labelled stat block beneath it. - Tabular numbers must use
font-variant-numeric: tabular-nums. Operators scan columns of numbers; proportional digits jitter. - Gradient backgrounds need fallback contrast — the white text on brand-on-brand-deeper passes WCAG AA at the brand-token defaults; verify when extending to a new portal palette.