BRAID
Braid Logo
 

PageBlock

Open in Playroom
Provides a top-level page container, constraining the content width (using ContentBlock) while establishing common screen gutters on smaller devices.

Alternatives

Maximum width

Use the width prop to adjust the maximum width of the page container. Choose from either medium or large.
Open in Playroom

Screen gutters

Establishes consistent responsive gutters between the content and the screen edge.
Uses xsmall space on mobile and the semantic gutter on tablet and above.

Custom semantics

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.