Container
The page-level column. Applies the theme's gutter at the viewport edge and caps content width at the prose, content or page measure, so every screen shares one horizontal rhythm.
Basic usage
Install the package:
pnpm add @design-schema/react @design-schema/tokens Import the stylesheet once for the app, then the component:
import '@design-schema/tokens/calm-precise/css';
import '@design-schema/react/index.css';
import { Container } from '@design-schema/react'; Examples
Container content.
import { Container, Text } from '@design-schema/react';
<Container><Text>Container content.</Text></Container>Props
5 rows| Prop | Type | Default | Description |
|---|---|---|---|
| children required | content | — | The page or region content, usually a Stack with `gap: section` between regions. A string given as `children` in an example is an illustrative label, not content to build: stories render it inside a Text with its defaults (element `p` on web and Lit) on every platform (native requires one) and do not construct the Stack it names; that wrapper is the one sanctioned difference from the literal `given`. The Default story's children is the string "Container content." in the same Text. |
| width | prose | content | page | full | content | `prose` for reading (a 65-character measure), `content` for most screens, `page` for full-bleed layouts with wide grids, `full` for no cap (gutters only). |
| gutter | narrow | default | wide | none | default | Horizontal padding at the viewport edge. Responsive: `default` uses the narrow gutter under the content width and the wide gutter above the page width. `none` for a nested container inside a padded parent. |
| align | center | start | center | Where the capped column sits in a wider viewport. `start` sets `margin-inline: 0` on both sides, not just the start side, so the column never picks up an asymmetric margin. That margin is deliberately not a style binding: it is structural, it takes only two values, and there is nothing in it for a theme to tune, so it has no hook and is not overridable — unlike maxWidth and paddingInline. The selector is written at every `width`, `full` included, where it is simply inert (there is no cap for the column to sit inside), so the markup does not change shape with the width. React Native has no margin here: `center` maps to `alignSelf: center` and `start` to `alignSelf: flex-start`. |
| element | div | main | section | div | Use `main` for the page's main column when no Landmark wraps it. A page has exactly one `main`; that is the author's responsibility, since the component cannot see the rest of the page, so it neither enforces it nor warns. `a11y.role` is `none` because that is what the default `div` exposes; the landmark contract lives here and in the main-element scenario, and applies to this one value. On Lit `section` is indistinguishable from `div` — a custom element cannot retag its host and a section is a region only when it is named — so the value exists there for API parity and changes nothing observable. |
Accessibility
No implicit ARIA role — the component is styling and structure, and adds nothing to the accessibility tree.
Anatomy
What generation guarantees
This component declares no contrast pair of its own — it inherits the colour of whatever it is placed in — and it does not animate.