Stats grid
BlockA heading over a row of big figures, each with a label and a line of context, whose digits roll up from zero as the row scrolls into view.
- Sections
- 2 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add stats-gridimport { DEFAULT } from "@/components/blocks/stats-grid"; export default function Page() { return <DEFAULT />;}<StatsGridBlock>
| Prop | Type | Default |
|---|---|---|
description | ReactNode | "See how we're making a difference across the globe" |
heading | ReactNode | "Our impact in numbers" |
headingLevelLevel of the section heading. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
localesLocale for number formatting. Defaults to the reader's. | Intl.LocalesArgument | — |
stats | StatsGridStat[] | DEFAULT_GRID_STATS |
Plus every attribute of <section> except title.
One section landmark named by its heading (level set with `headingLevel`). A stat is data, not a heading, so the grid is a description list — label as term, figure as definition. The rolling digits are aria-hidden and each figure's settled, locale-formatted value is read once, so a screen reader never hears the zero the roll starts from. Only a row below the fold is held back to animate; under reduced motion values appear at once.