order
Container
Centres page content and caps its width.
Project pageA centred column at the default width
Harbour rebrand
Identity, site and launch kit for the harbour trust.
MC
Maya Chen, due 24 Oct
On trackmaxWidth="sm"
maxWidth="md"
maxWidth="xl"
maxWidth="full"
verticalPadding set
In context
Settings pageA narrow column keeps form lines readable
Budget
Harbour rebrand
£48,200 agreed, 84% complete.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
as | ElementType | undefined | No | div |
maxWidth | string | number | undefined | No | lg |
padding | string | undefined | No | var(--rebar-space-xl) |
verticalPadding | string | undefined | No | — |
Width and padding
maxWidth takes "sm" (480px), "md" (640px), "lg" (800px, the default), "xl" (1040px), "full", a number of pixels, or any CSS length. padding is horizontal only; set verticalPadding when nothing else spaces the page from its header and footer.
data-rebar-* attributes
data-rebar-component="container" on the root.
Migrating to Ant Design
Not codemod-covered. AntD's Layout.Content does not constrain width; keep a plain CSS max-width rule or compose the target library's grid.