Page
A page layout organizes sections on a page using a grid and grid columns.
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 { PageLayout } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | — | The main content of the page. |
| panel | ReactNode | — | Contextual content shown alongside. Leave it out for a page that needs the full width. |
Accessibility
What the component does for you, and what it needs from you.
- The main content is a main landmark, so it can be jumped to and a skip link has somewhere to go.
- The panel comes after the main content in reading order, which is usually right, because the main content is why the reader is here.
- The layout does not create headings. The page still needs a heading structure of its own.