Heading
A heading shows text at different sizes and styles.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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 | None | 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' | None | The heading level. This sets the page structure, which matters more than the size. |
Accessibility
What the component does for you, and what it needs from you.
- Screen reader users move around a page by heading level. That is why size and level are separate props.
- Do not skip levels. A page goes h1, then h2, then h3, whatever size each one is.
- Use one h1 per page, for the page title.