# Container

> Centres page content with a maximum width and responsive gutters.

Category: Layout · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/container

Container sets the readable width of a page region. Sizes come from the size tokens: sm 640, md 880, lg 1240 (the Binds site width) and xl 1440. The side gutters scale from 16 to 40px with the viewport.

## Import

```tsx
import { Container } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import type { ReactNode } from 'react';
import { Container, Text } from '@bindshq/stance-react';

const Frame = ({ children }: { children: ReactNode }) => (
  <div
    style={{
      width: '100%',
      background: 'var(--st-color-bg-muted)',
      padding: '12px 0',
      borderRadius: 8,
    }}
  >
    {children}
  </div>
);

const Inner = ({ label }: { label: string }) => (
  <div
    style={{
      padding: 12,
      background: 'var(--st-color-bg-surface)',
      border: '1px solid var(--st-color-border-default)',
      borderRadius: 6,
    }}
  >
    <Text size="sm">{label}</Text>
  </div>
);

export function Basic() {
  return (
    <Frame>
      <Container size="sm">
        <Inner label="Content is centred at up to 640px wide." />
      </Container>
    </Frame>
  );
}
```

### Sizes

```tsx
import type { ReactNode } from 'react';
import { Container, Text } from '@bindshq/stance-react';

const Frame = ({ children }: { children: ReactNode }) => (
  <div
    style={{
      width: '100%',
      background: 'var(--st-color-bg-muted)',
      padding: '12px 0',
      borderRadius: 8,
    }}
  >
    {children}
  </div>
);

const Inner = ({ label }: { label: string }) => (
  <div
    style={{
      padding: 12,
      background: 'var(--st-color-bg-surface)',
      border: '1px solid var(--st-color-border-default)',
      borderRadius: 6,
    }}
  >
    <Text size="sm">{label}</Text>
  </div>
);

export function Sizes() {
  return (
    <div style={{ display: 'grid', gap: 8, width: '100%' }}>
      {(['sm', 'md', 'lg'] as const).map((s) => (
        <Frame key={s}>
          <Container size={s}>
            <Inner label={`size="${s}"`} />
          </Container>
        </Frame>
      ))}
    </div>
  );
}
```

### As a landmark

```tsx
import type { ReactNode } from 'react';
import { Container, Text } from '@bindshq/stance-react';

const Frame = ({ children }: { children: ReactNode }) => (
  <div
    style={{
      width: '100%',
      background: 'var(--st-color-bg-muted)',
      padding: '12px 0',
      borderRadius: 8,
    }}
  >
    {children}
  </div>
);

const Inner = ({ label }: { label: string }) => (
  <div
    style={{
      padding: 12,
      background: 'var(--st-color-bg-surface)',
      border: '1px solid var(--st-color-border-default)',
      borderRadius: 6,
    }}
  >
    <Text size="sm">{label}</Text>
  </div>
);

export function Landmark() {
  return (
    <Frame>
      <Container as="section" aria-label="Pricing" size="md">
        <Inner label="A labelled section landmark" />
      </Container>
    </Frame>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Container | `as` | `keyof JSX.IntrinsicElements` | `'div'` | Element to render, e.g. main or section. |
| Container | `size` | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'lg'` | Maximum width. |
| Container | `flush` | `boolean` | `false` | Remove side gutters. |

## Accessibility

- Render page regions as landmarks (`as="main"`, `as="section"` with a label) so they can be navigated.

## Guidelines

**Do**

- Use md for forms and long-form reading.
- Use lg for marketing pages and dashboards.

**Don’t**

- Nest containers; one per region.

## Related

- https://stanceui.com/components/grid
- https://stanceui.com/components/stack