Stats

Headline numbers in a row or as cards.

Last updated

By the numbers

85ComponentsCopy-in, typed, documented
20SectionsMarketing and application
0 kBRuntimeUntil an island is needed
AAContrastEvery pair, both themes
Show code
<Stats heading="By the numbers" items={[{ value, label, description? }, …]} />

Add

npx @ava-ui/apogee add stats

API

Prop Type Default Category Description
eyebrow, heading, description string — content Section header (optional).
items { value: string, label: string, description?: string }[] — content Required. Up to four per row.
label string English content Landmark name when there is no heading.
layout 'row' | 'cards' 'row' layout
align 'start' | 'center' 'start' layout
background, spacing, headingLevel, id layout As on every section.

Layouts

85ComponentsCopy-in, typed, documented
20SectionsMarketing and application
0 kBRuntimeUntil an island is needed
AAContrastEvery pair, both themes
85ComponentsCopy-in, typed, documented
20SectionsMarketing and application
0 kBRuntimeUntil an island is needed
AAContrastEvery pair, both themes
Show code
<Stats layout="cards" align="center" items={…} />
<Stats background="primary" items={…} />

Accessibility

  • Numbers use tabular figures; each stat is a value and a label in reading order.