Layout & display
SectionHeading
A heading for one section of a page, with an optional row of controls beside it. It takes the heading level rather than a class, so the type treatment cannot disagree with the element, and the element is always a real heading that a heading query can find.
Basic
Level 2 sits under a page title. Level 3 sits inside a card, where it drops a size rather than a weight: two semibold lines at the same size read as one heading broken in half.
Danger zone
Retention
Eyebrow
The small uppercase label that heads a band of content. It is a variant rather than a third level, because the element is a decision about document structure and the treatment is not: an eyebrow appears at both levels and reads the same at either.
It carries no margin, and neither does the default. Thirty of these shipped hand rolled across two apps in four different bottom margins, so two bands on the same page sat different distances from their own content. The stack around the heading owns that distance.
Revenue
Account
With an action
API keys
Inside a card
Webhooks
Two endpoints are receiving events.
API
| Prop | Type | Default | Description |
|---|---|---|---|
level | 2 | 3 | 2 | 2 under a page title, 3 inside a card. Renders the matching heading element. |
variant | 'default' | 'eyebrow' | 'default' | eyebrow is the small uppercase band label. It reads the same at both levels, and neither variant carries a margin. |
actions | Snippet | no default | Right-aligned controls beside the heading. |
class | string | no default | Extra classes on the heading row. |
children required | Snippet | no default | The heading text. |