Open in Playroom
Provides a top-level page container, constraining the content width (using ContentBlock) while establishing common screen gutters on smaller devices.
Use the width prop to adjust the maximum width of the page container. Choose from either small, medium or large.Setting the width to full will allow the content to grow to the full width while maintaining consistent screen gutters.
Open in Playroom
Establishes consistent responsive gutters between the content and the screen edge.Uses small space on mobile and the semantic gutter on tablet and above.
On “tablet” and above
Below “tablet”
Open in Playroom
The HTML tag can be customised to ensure the underlying document semantics are meaningful. This can be done using the component prop and supports div (default), article, aside, main, section and nav.