Heading
Interactive
See Heading in Storybook for every variant, with live controls.
Page, section and card headings. Renders a real h1–h4.
import { Heading } from "@kairosis/eidos";
<Heading level={1}>Runs</Heading>
<Heading level={3}>api-gateway</Heading>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
level | 1 | 2 | 3 | 4 | 2 | 28 / 22 / 18 / 14px — and the tag that's rendered |
muted | boolean | false | Muted colour |
children | ReactNode | — | Required |
Also accepts every heading attribute.
Guidelines
levelsets both the size and the tag, so document outline and visual hierarchy can't drift apart. If you need a different size, restyle — don't skip levels.- Sentence case, always.
- Levels 1–2 carry tighter letter-spacing, which large type needs to avoid looking loose.
- All headings are 600 weight; hierarchy comes from size, not weight.