Stats trend cards
BlockMetric cards with an icon, a figure that rolls up from zero, a label, a line of context and a trend stated in words.
- Sections
- 3 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add stats-trend-cardsimport { DEFAULT } from "@/components/blocks/stats-trend-cards"; export default function Page() { return <DEFAULT />;}<StatsTrendCardsBlock>
| Prop | Type | Default |
|---|---|---|
description | ReactNode | "Track your success with these important numbers" |
heading | ReactNode | "Key metrics" |
headingLevelLevel of the section heading. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
localesLocale for number formatting. Defaults to the reader's. | Intl.LocalesArgument | — |
stats | StatsTrendCard[] | DEFAULT_TREND_CARDS |
Plus every attribute of <section> except title.
One section landmark named by its heading (level set with `headingLevel`); the cards are a description list. Trends are stated in words ("up 12%") with the arrow hidden, and `polarity` decides whether a rise is good news, so rising churn is never painted green. The rolling digits are aria-hidden and the settled value is read once; icons are decorative. The trend slides in from the inline start, mirrored on right-to-left pages; under reduced motion everything appears at once.