/// Layout
Container
A horizontally centred content column bounded by the brand max-width and page gutter.
import { Container } from "@protocore/pds";Basics
Wrap page content in a Container to centre it and cap its width. It supplies the page gutter as inline padding, so children never touch the viewport edge.
Ledger overview
Container centres its children and caps them at the brand max-width, with the standard page gutter as inline padding. Everything on a page sits inside one.
Sizes
size="lg" (1240px, the default) suits dashboards and wide tables; size="md" (860px) gives prose and forms a comfortable reading measure.
size="md" · 860px — reading column, docs, forms
size="lg" · 1240px — dashboards, wide tables (default)
When to use it
Reach for Container to bound horizontal width and centre a column — it is the outermost wrapper inside each page region. Use Section for vertical rhythm (full-bleed bands with block padding); the two compose, a Section typically holding one Container. It sets width and gutter only — never inner spacing between children; use Stack or Grid for that. Inside AppShell, the main slot is already width-constrained, so a Container there is only needed to further narrow content.
Usage
Do
- Put a Container inside each Section so the band is full-bleed but its content stays measured.
- Drop to size="md" for long-form reading and single-column forms.
- Let the Container own the page gutter — don't add your own horizontal padding around it.
Don't
- Nest a Container inside another Container — the inner gutter doubles up.
- Use it to space children apart; that is Stack's and Grid's job.
- Hardcode a max-width via style when a size prop already covers it.
Accessibility
- Container is a presentational `<div>` with no role or semantics of its own.
- It renders whatever landmark elements you place inside it; it adds none.
Container props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | |
size | enum | lg | Max content width — `"md"` (860px) or `"lg"` (1240px). |
style | CSSProperties | — |