# Metrics sections > Headline figures in a row, a card, on a photo or beside an image, with dividers, accent lines, icons or links. URL: https://apogee.avaui.dev/docs/metrics-sections Last updated: 2026-10-20 Headline figures in a row, a card, on a photo or beside an image, with dividers, accent lines, icons or links. Last updated October 20, 2026 Each example is a block: a [Section](https://apogee.avaui.dev/docs/section) with a [SectionHeader](https://apogee.avaui.dev/docs/section-header) and a description list of figures. Each figure is a term (the label) and its value, so screen readers read them as pairs. ```sh 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](https://apogee.avaui.dev/docs/sections/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. [ ![](https://apogee.avaui.dev/thumbs/metrics-sections__card-brand-dark.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__card-brand-dark.dark.webp) Card brand darkA centred heading over three figures in a brand-colour card. ](https://apogee.avaui.dev/docs/metrics-sections/card-brand-dark)[ ![](https://apogee.avaui.dev/thumbs/metrics-sections__card-gray-light.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__card-gray-light.dark.webp) Card gray lightA centred heading over three figures in a grey card. ](https://apogee.avaui.dev/docs/metrics-sections/card-gray-light)[ ![](https://apogee.avaui.dev/thumbs/metrics-sections__image-with-cards-01.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__image-with-cards-01.dark.webp) Image with cards 01A centred heading with a badge over three figure cards on a photo. ](https://apogee.avaui.dev/docs/metrics-sections/image-with-cards-01)[ ![](https://apogee.avaui.dev/thumbs/metrics-sections__image-with-cards-02.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__image-with-cards-02.dark.webp) Image with cards 02A heading and actions on a brand band, over three figure cards on a photo. ](https://apogee.avaui.dev/docs/metrics-sections/image-with-cards-02)[ ![](https://apogee.avaui.dev/thumbs/metrics-sections__minimal-centered-text.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__minimal-centered-text.dark.webp) Minimal centered textFour centred figures between two rules. ](https://apogee.avaui.dev/docs/metrics-sections/minimal-centered-text)[ ![](https://apogee.avaui.dev/thumbs/metrics-sections__minimal-centered-text-brand.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__minimal-centered-text-brand.dark.webp) Minimal centered text brandFour centred figures between two rules on the brand colour. ](https://apogee.avaui.dev/docs/metrics-sections/minimal-centered-text-brand)[ ![](https://apogee.avaui.dev/thumbs/metrics-sections__simple-accent-line.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__simple-accent-line.dark.webp) Simple accent lineA centred heading over four figures, each with an accent line and a link. ](https://apogee.avaui.dev/docs/metrics-sections/simple-accent-line)[ ![](https://apogee.avaui.dev/thumbs/metrics-sections__simple-accent-line-brand.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__simple-accent-line-brand.dark.webp) Simple accent line brandA centred heading over four figures, each with an accent line and a link, on the brand colour. ](https://apogee.avaui.dev/docs/metrics-sections/simple-accent-line-brand)[ ![](https://apogee.avaui.dev/thumbs/metrics-sections__simple-centered-text.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__simple-centered-text.dark.webp) Simple centered textA centred heading over three figures split by dividers. ](https://apogee.avaui.dev/docs/metrics-sections/simple-centered-text)[ ![](https://apogee.avaui.dev/thumbs/metrics-sections__simple-centered-text-brand.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__simple-centered-text-brand.dark.webp) Simple centered text brandA centred heading over three figures split by dividers, on the brand colour. ](https://apogee.avaui.dev/docs/metrics-sections/simple-centered-text-brand)[ ![](https://apogee.avaui.dev/thumbs/metrics-sections__simple-with-actions-01.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__simple-with-actions-01.dark.webp) Simple with actions 01A heading with actions beside it, over four figures with a line each. ](https://apogee.avaui.dev/docs/metrics-sections/simple-with-actions-01)[ ![](https://apogee.avaui.dev/thumbs/metrics-sections__simple-with-actions-02.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__simple-with-actions-02.dark.webp) Simple with actions 02A heading and actions beside four figures, each with an icon. ](https://apogee.avaui.dev/docs/metrics-sections/simple-with-actions-02)[ ![](https://apogee.avaui.dev/thumbs/metrics-sections__split-image-01.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__split-image-01.dark.webp) Split image 01A heading over four figures with a line each, beside a photo. ](https://apogee.avaui.dev/docs/metrics-sections/split-image-01)[ ![](https://apogee.avaui.dev/thumbs/metrics-sections__split-image-01-brand.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__split-image-01-brand.dark.webp) Split image 01brandA heading over four figures with a line each, beside a photo, on the brand colour. ](https://apogee.avaui.dev/docs/metrics-sections/split-image-01-brand)[ ![](https://apogee.avaui.dev/thumbs/metrics-sections__split-image-02.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__split-image-02.dark.webp) Split image 02A photo beside a heading and four figures. ](https://apogee.avaui.dev/docs/metrics-sections/split-image-02)[ ![](https://apogee.avaui.dev/thumbs/metrics-sections__split-image-02-brand.light.webp)![](https://apogee.avaui.dev/thumbs/metrics-sections__split-image-02-brand.dark.webp) Split image 02brandA photo beside a heading and four figures, on the brand colour. ](https://apogee.avaui.dev/docs/metrics-sections/split-image-02-brand) ## 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. ](https://apogee.avaui.dev/docs/section-header)[ Featured iconAn icon in a tinted tile, the glyph that leads an empty state, an alert, a stat or a feature card. ](https://apogee.avaui.dev/docs/featured-icon)[ StatsHeadline numbers in a row or as cards. ](https://apogee.avaui.dev/docs/sections/stats)