ComponentsLumos 1.0.2Open 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 two
Heading three
Heading four
Heading five
<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. Lumos applies text-box: trim-both cap alphabetic to headings and paragraphs, so the browser aligns their visible edges from the font's own metrics. Older browsers keep ordinary line boxes: the content still works, but the spacing is looser.