Container
Container centers content with the system gutter. Choose the maximum reading or working width;
--container-max cascades, so nested containers inherit that decision until one overrides it.
Examples
A focused measure
A narrower measure makes dense prose and forms easier to scan. Let wide application regions use the stylesheet default instead of adding arbitrary page padding.
A focused reading measure keeps long decisions easier to scan.
A cascading maximum
A nested Container does not start a competing width rule. It inherits the outer maximum, which lets a page establish its measure once and reuse it inside sections.
Outer content uses a 720px measure.
The nested container inherits that measure unless it sets a new one.
When to use
Use a Container around a page or a section whose content needs a predictable maximum width.
--container-max sets that width. Its stylesheet default is 1200px; max writes the property from a
pixel number or a size keyword (sm 640, md 768, lg 1024, xl 1280), and nested containers inherit it through the cascade.
Reach for something else when:
- The page needs persistent navigation or context rails — use Shell.
- The children need a vertical or horizontal relationship — use Stack.
- The children must share column tracks — use Grid.
Accessibility
- Container renders a plain
<div>and adds no role, keyboard model or accessible name. - Give the region semantics only when the surrounding page needs a landmark; avoid creating a landmark solely to express width.
- It does not manage focus. Focus order remains the DOM order of its children.
API and code
| Name | Type | Required | Description |
|---|---|---|---|
max | number | ContainerSize | (string & {}) | — | Maximum content width: a number of pixels or a size keyword (`sm` 640, `md` 768, `lg` 1024, `xl` 1280). Sets `--container-max`, which cascades to nested containers. Unrecognised values are ignored so the container keeps its inherited maximum. |
Set the custom property where the width decision begins. A nested container inherits it:
<div class="lyra-container" style="--container-max: 720px">
<p>Page content with a 720px maximum width.</p>
<div class="lyra-container">
<p>This nested region keeps the same maximum width.</p>
</div>
</div><lyra:container> Generated from lyra-ds/blade v0.10.0.
| Prop | Default | Required | Example values |
|---|---|---|---|
max | null | — | — |
<lyra:container max="lg">
<h1>Workspace overview</h1>
</lyra:container>