Heading
A real heading. Its level sets the page outline, and its size follows.
Preview
tsx
import { Heading, Stack } from '@kerf-js/veneer'export function Levels() { return ( <Stack gap="related"> <Heading level={1}>Project settings</Heading> <Heading level={2}>Project settings</Heading> <Heading level={3}>Project settings</Heading> <Heading level={4}>Project settings</Heading> </Stack> )}Installation
npm install @kerf-js/veneerTry it
Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.
Live preview
Controls
Level
Role
Codeupdates as you change the controls
import { Heading } from '@kerf-js/veneer'<Heading>Project settings</Heading>Usage
tsx
import { Heading } from '@kerf-js/veneer'<Heading>Project settings</Heading>Roles
role changes the look and leaves the outline alone.
tsx
import { Heading, Stack } from '@kerf-js/veneer'export function Roles() { return ( <Stack gap="related"> <Heading level={2} role="display" > Ship it </Heading> <Heading level={2} role="title" > Ship it </Heading> <Heading level={2} role="heading" > Ship it </Heading> <Heading level={2} role="label" > Ship it </Heading> </Stack> )}A page's outline
Use level for the outline, with a single 1 at the top and 2 for each section under it.
tsx
import { Heading, Stack, Text } from '@kerf-js/veneer'export function PageTop() { return ( <Stack gap="section"> <Stack gap="tight"> <Heading level={1}>Deploys</Heading> <Text subtle> Everything shipped to storefront this month. </Text> </Stack> <Stack gap="tight"> <Heading level={2}>Failed</Heading> <Text subtle> Retry timed out upstream calls, by Sam Okafor. </Text> </Stack> <Stack gap="tight"> <Heading level={2}>Live</Heading> <Text subtle> Cache product images at the edge, by Priya Raman. </Text> </Stack> </Stack> )}When to use
Use it for
- Titling a page or a section
Reach for something else
- Text, when it looks like a heading but isn't one in the outline
Accessibility
- Don't skip levels: screen reader users move through a page by its headings.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | unknown | — | What it contains. |
level | 2 | 3 | 4 | 6 | 1 | 5 | 2 | The place in the outline, from 1 to 6. |
role | HeadingRole | — | The look: display, title, heading or label. |