ComponentsLumos 0.0.1Open component
Heading
A heading whose level and size are separate decisions.
The most useful thing about Heading is that tag and variant are two different props. tag is the heading level: what the page outline and a screen reader use. variant is how big it looks. Keeping them separate means you never have to choose between a correct outline and the right size.
<Heading tag="h2">Heading two</Heading>
<Heading tag="h3">Heading three</Heading>
<Heading tag="h4">Heading four</Heading>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
render | boolean | true | Set to false to skip this component and everything inside it. |
tag | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h2" | The heading level. Decides the page outline, not the size. |
variant | "inherit" | "display" | "h1"–"h6" | "large" | "main" | "small" | matches `tag` | The text style to draw it in. Defaults to the style matching the level, so most headings need only tag. |
maxWidth | number | None | A maximum width in ch units, so a heading breaks where you want rather than running the full container width. |
Level and size
A section's heading should usually be an h2 for the outline, whatever size the design calls for:
<Heading tag="h2" variant="display">Enormous, still an h2</Heading>
<Heading tag="h2" variant="h5">Small, still an h2</Heading>Accenting a word
The heading-accent class colors any <strong> inside the heading with the theme's accent color, without changing its weight.
<Heading tag="h1" variant="display" class="heading-accent">
Build sites that are <strong>fast</strong> and yours.
</Heading>Spacing
Each text style carries its own margins, and a heading immediately followed by text tightens the gap between them automatically. There is also leading trim on every heading, so the visible space above and below matches what you see rather than what the font declares, which is why headings sit flush without nudging.