Heading
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
Semantic heading component rendering h1-h6 elements with consistent sizing.
Import
import { Heading } from "~lib/typography";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
level | 1 | 2 | 3 | 4 | 5 | 6 | No | 1 | The heading level (h1-h6) |
size | "5xl" | "6xl" | "7xl" | "8xl" | No | The level's | Set larger than level 1, on a sentence's line |
children | ReactNode | Yes | N/A | Content to display |
align | "left" | "center" | "right" | No | Inherited | Text alignment |
truncate | boolean | No | false | Truncate overflow |
lines | number | No | N/A | Show at most this many lines, ending in "…" |
fit | "content" | "fill" | "auto" | number | No | "content" | Container height behavior; auto also picks the size |
reading | string | No | N/A | A reading set small above the text (ruby text) |
Examples
Heading Levels
Aligned
Set align to center or right-align a heading. Leave it unset and the heading follows the
alignment of whatever it sits in, the way a Paragraph does, so one class on a wrapper aligns
every heading and paragraph inside it.
At Most a Few Lines
Set lines to cut text off with "…" after that many lines. The box is only as tall as the lines
it shows, so text that is shorter leaves no gap and whatever comes next moves up. A fixed fit
height, by contrast, keeps its full height even when the text is short.
Larger Than Level 1
A quotation alone in a large box reads small at level 1. Set size to one of the steps above it
(5xl to 8xl, the sizes the Display figures use) and the heading is set that large, on the
leading of a level 1 heading rather than the figures' solid line, so a wrapped sentence keeps room
between its lines. It keeps its level's tag and weight.
<Heading size="6xl">Stay hungry, stay foolish.</Heading>
With a Reading
Set reading to print a reading small above the text, as the kana reading of a Japanese word is
printed over its kanji. The reading is set at about half the heading's size, never below the
smallest step, and the heading's box grows by that one line, so a plan budgets it as the heading's
line plus the reading's. The text and its reading are set as one block, so truncate and lines do
not cut it.
<Heading reading="かんじ">漢字</Heading>
Fit Modes
Fit Content (default)
Container sizes to its text content. Use when the text should take only as much space as it needs.
Fit Fill
Container fills available flex space. Use inside flex layouts when the text should expand to fill remaining space. Text that runs past that space is cut at the container's edge instead of drawn over the block below, which keeps a widget's saved render tidy when it is laid out in a smaller box than the one it was measured in.
Fit Auto
The container fills the room left, as fill does, and the heading picks its own size: it starts at
its size (or its level's) and steps down the type scale until its wrapped lines fit the box,
measured in the real font. Use it for a sentence whose length varies, such as a quotation or a
fact, so a short one is set large and a long one still fits. With lines, the size is also small
enough for the text to fit that many lines. A text that runs past even the smallest step is set at
it and ends in "…". The size is picked as the page renders, so a saved render keeps it.
<div className="flex h-full flex-col">
<Heading size="7xl" fit="auto">
{quotation}
</Heading>
</div>
Fixed Height
Container has a hard-coded pixel height. Use when you need a precise, known container size.
See Also
- Paragraph - Body text with variants
- Blockquote - Styled quote blocks