Component reference
Main
Canonical page composition owning gutter, measure, and vertical rhythm.
Setup
import { Main } from '@usefragments/ui';Examples
Full Measure
Page composition that uses the full available canvas
Loading preview...
Narrow Measure
Readable page composition constrained to the canonical 800px measure
Loading preview...
Props
Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Page regions composed from Main.Header, Main.Description, Main.Content, and Main.Footer |
measure | enumfullnarrow | full | Maximum width applied to the page composition |
as | enumdivsectionnavarticleasideheaderfootermainulol | main | Semantic HTML element rendered by the root |
Usage Guidelines
When to use
- Composing a page header, description, content, and footer
When not to use
- Application shell navigation (use AppShell)
Best practices
- Use one Main gutter owner per page
- Compose page regions with Main.Header, Main.Description, Main.Content, and Main.Footer
Accessibility
- Use the default main element unless an existing shell already owns the main landmark