Skip to main content
Fragments Cloud

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

PropTypeDefaultDescription
asenumdivsectionnavarticleasideheaderfootermainulolmainSemantic HTML element rendered by the root
childrenRequirednodeNot setPage regions composed from Main.Header, Main.Description, Main.Content, and Main.Footer
measureenumfullnarrowfullMaximum width applied to the page composition

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