Heading
A heading is a typography component used to display text in different sizes and formats.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Heading } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | — | The heading text. |
| size | 'xxlarge' | 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall' | 'xxsmall' | 'medium' | How large it looks. This is a visual choice and says nothing about structure. |
| as | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | — | Which heading level it is. This is the structural choice, and it is the one that matters. |
Accessibility
What the component does for you, and what it needs from you.
- The level is the structure, and readers navigate by it. This is why size and level are separate props.
- Levels should not skip. A page goes h1, then h2, then h3, whatever sizes those are drawn at.
- One h1 per page, which is the page title.