The eyebrow / heading / standfirst trio used at the top of a page or the start of a section. The heading tag (level) follows the document outline while the visual size is set separately, so neither is sacrificed for the other. Layout-neutral: the caller controls spacing and measure.
Examples
Section heading
Eyebrow, heading and standfirst, left-aligned.
Pricing
One price, everything included
No tiers, no add-ons — every app, one storage quota.
<UiSectionHeading
eyebrow="Pricing"
title="One price, everything included"
subtitle="No tiers, no add-ons — every app, one storage quota."
/>Centred hero
A larger, centred heading with a nested level.
Own your notes
A calm, private place to think.
<UiSectionHeading
align="center"
size="lg"
level="h1"
title="Own your notes"
subtitle="A calm, private place to think."
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | '' | Small uppercase label above the heading. |
| title | string | '' | Heading text (omit if using the title slot). |
| subtitle | string | '' | Supporting paragraph below the heading. |
| level | string | 'h2' | Heading tag, chosen to match the document outline. h1h2h3h4 |
| size | string | 'md' | Visual size of the heading, independent of level. smmdlg |
| align | string | 'left' | Horizontal alignment. leftcenter |
| id | string | undefined | Optional id on the heading, for aria-labelledby. |
Slots
| Slot | Description |
|---|---|
title | Overrides the title prop for rich heading content. |
subtitle | Overrides the subtitle prop. |
default | Extra content below the standfirst, e.g. a call to action. |