Theme
Section header
The head of a marketing section: the [ 01 ] index chip in mono and an overline, a headingSm heading and a one-line textMuted lede, with optional actions. IndexChip is the chip alone.
Examples
Research
Three programmes, one standard of evidence.
Each pursues its own questions; all three are held to the same proof.
Projects
Built in the open.
Every project has its own repository, licence and governance.
Props
SectionHeader
The head of a marketing section: the index chip and overline, the heading, a lede.
| Prop | Type | Default | Description |
|---|---|---|---|
id? | string | — | The heading's id, for the section it names (aria-labelledby) and for links to it. |
level? | 2 | 3 | 2 | The heading's level in the page's outline. |
index? | number | — | The section's place on the page, shown as the `[ 01 ]` chip. |
overline? | ReactNode | — | A short label above the heading, set as an overline. |
title | ReactNode | — | |
lede? | ReactNode | — | One line under the heading that says what the section shows. |
actions? | ReactNode | — | Links that lead on from the section: ButtonLinks or a text link. |
align? | "center" | "start" | "start" |
IndexChip
A section's number on the page, `[ 01 ]` in mono. It orders the page for the eye only, so it is hidden from screen readers, which have the headings.
| Prop | Type | Default | Description |
|---|---|---|---|
index | number | — | The section's place on the page, from 1. |
Accessibility
- The index chip only orders the page for the eye, so it is hidden from screen readers, which navigate by the headings.
- The heading is level 2 by default; level 3 for a section inside another.
- The overline and the lede are textSubtle and textMuted, both above 4.5:1 on every surface.