Metrics sections

Headline figures in a row, a card, on a photo or beside an image, with dividers, accent lines, icons or links.

Last updated

Each example is a block: a Section with a SectionHeader and a description list of figures. Each figure is a term (the label) and its value, so screen readers read them as pairs.

npx @ava-ui/apogee add metrics/simple-centered-text

Copy is props

Every block in this family takes the same content props (MetricsContent in sections/_shared/metrics.ts), with its sample copy as the defaults. A block ignores the props it has no place for, so you can swap one block for another and keep the copy. The Stats section takes the same names for the props they share.

  • eyebrow: The small label above the heading.

  • heading: The heading.

  • description: The line under the heading.

  • label: Landmark name when the block shows no heading.

  • items: The figures. Blocks without room for a line ignore description.

  • primaryAction: The solid button.

  • secondaryAction: The outline button.

  • media: The photo behind or beside the figures.

  • Pass null to hide an optional part, such as description={null}.

  • Some blocks add props of their own; the top of each block’s file lists them.

Card brand darkA centred heading over three figures in a brand-colour card.
Card gray lightA centred heading over three figures in a grey card.
Image with cards 01A centred heading with a badge over three figure cards on a photo.
Image with cards 02A heading and actions on a brand band, over three figure cards on a photo.
Minimal centered textFour centred figures between two rules.
Minimal centered text brandFour centred figures between two rules on the brand colour.
Simple accent lineA centred heading over four figures, each with an accent line and a link.
Simple accent line brandA centred heading over four figures, each with an accent line and a link, on the brand colour.
Simple centered textA centred heading over three figures split by dividers.
Simple centered text brandA centred heading over three figures split by dividers, on the brand colour.
Simple with actions 01A heading with actions beside it, over four figures with a line each.
Simple with actions 02A heading and actions beside four figures, each with an icon.
Split image 01A heading over four figures with a line each, beside a photo.
Split image 01brandA heading over four figures with a line each, beside a photo, on the brand colour.
Split image 02A photo beside a heading and four figures.
Split image 02brandA photo beside a heading and four figures, on the brand colour.

Related

SectionHeaderEyebrow, heading and description at the top of a section or an app page, with actions, a divider and the level, alignment and colours every section shares.
Featured iconAn icon in a tinted tile, the glyph that leads an empty state, an alert, a stat or a feature card.
StatsHeadline numbers in a row or as cards.