Container

When to useLink to "When to use"

• The content of a page or screen: wrap it once, usually inside AppShell's main area, so headings and content share the same edges on every page.
• A reading column: size="sm" or size="md" keeps lines of text short on wide screens.

Use something else when:

• you only need padding around a group of items: padding on Stack, Inline or Grid
• you want a visible box with a surface and border: Card
• you are laying out items in columns: Grid, inside the Container

UsageLink to "Usage"

import { Container, Stack } from "@arshad-shah/cynosure";

<Container as="main" paddingBlock="8">
  <Stack gap="6">
    <PageHeader title="Tasks" />
    <TaskList />
  </Stack>
</Container>
<Container size="sm">…</Container>
<Container size="full" padding="8">…</Container>

SizesLink to "Sizes"

size sets the widest the column gets, gutters included: sm 640px, md 768px, lg 1024px (the default) and xl 1280px. full has no cap and keeps the gutters. Below its cap the column is exactly as wide as its parent, so it never overflows a narrow one.

GuttersLink to "Gutters"

padding is the space token for the two side gutters (the default is space 6, 16px). paddingBlock adds padding above and below. padding="0" removes the gutters.

Not centredLink to "Not centred"

center={false} keeps the column at the inline start: the left edge, or the right edge in right-to-left text.

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

• Width: fills its parent up to the cap, also inside a flex row or a Stack that centres its children.
• Safe area: each gutter is at least the device's safe-area inset on that side, so content clears a phone's notch or rounded corners in landscape. Browsers only report insets when the page's viewport meta tag has viewport-fit=cover.
• Right to left: the gutters are equal on both sides and the column stays centred.
• Nesting: a nested Container has its own default gutters and inherits no padding from its parent.
• Text: font, size and colour are inherited from the page.
• Keyboard: none. A Container is never focusable.

TouchLink to "Touch"

Nothing in a Container can be pressed, so it has no hit area. On phones the gutters keep content off the screen edges and the safe-area insets.

ThemingLink to "Theming"

createTheme({ components: { container: { sizeLg: "1100px", padding: "24px" } } });

className and style are for layout only (margin, placement, a minimum height).

RelatedLink to "Related"

AppShell · Stack · Grid · Card