# Container
- **Category:** Layout (`layout`)
- **Slug:** `layout/container`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { Container } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/layout/container
> A horizontally centred content column bounded by the brand max-width and page gutter.
## 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.
## Props
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `className` | `string` | no | — | — |
| `size` | `enum` | no | `lg` | Max content width — `"md"` (860px) or `"lg"` (1240px). |
| `style` | `CSSProperties` | no | — | — |
## Examples
### 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.
```tsx
import { Container, Heading, Text } from "@protocore/pds";
export default function ContainerBasics() {
return (
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.
```tsx
import { Container, Stack, Text } from "@protocore/pds";
export default function ContainerSizes() {
return (
size="md" · 860px — reading column, docs, forms
size="lg" · 1240px — dashboards, wide tables (default)
);
}
```
## Do & don't
**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
**Notes**
- Container is a presentational `` with no role or semantics of its own.
- It renders whatever landmark elements you place inside it; it adds none.
## Related
`section`, `grid`, `stack`, `app-shell`
---
© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/