# Container

Centers content at a maximum width.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Container.tsx)

## Overview

A container centers content at a maximum width, with optional inline padding that grows on wider viewports.

Use it for width only. Render a landmark such as `main` through `render` when the region needs one.

## Examples

### Basic

```tsx
import { Container, Inline, Inset, Stack, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Container size="narrow">
      <Stack gap="6">
        <Inline justify="between">
          <span>Stack, Inline and Container</span>
          <Inline gap="2">
            <span {...styles.chip()}>Public</span>
            <span {...styles.chip()}>Private</span>
          </Inline>
        </Inline>
        <Inset space="6" {...styles.card()}>
          <Stack gap="3">
            <span>Card content</span>
            <span>Second line</span>
          </Stack>
        </Inset>
      </Stack>
    </Container>
  )
}

namespace styles {
  export const card = style({ backgroundColor: 'background.surface', borderRadius: '4xl' })

  export const chip = style({
    backgroundColor: 'grayAlpha.100',
    borderRadius: 'full',
    paddingBlock: '1',
    paddingInline: '3',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Container/Basic.tsx)

### Size

Set `size` to `narrow`, `medium`, `wide`, or `full`. It defaults to `wide`.

```tsx
import { Container, Inset, Stack, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Stack gap="3">
      {(['narrow', 'medium', 'wide', 'full'] as const).map((size) => (
        <Container key={size} size={size}>
          <Inset space="4" {...styles.card()}>
            {size}
          </Inset>
        </Container>
      ))}
    </Stack>
  )
}

namespace styles {
  export const card = style({ backgroundColor: 'background.surface', borderRadius: '4xl' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Container/Size.tsx)

### Gutter

Set `gutter={false}` to remove the inline padding. It defaults to `true`.

```tsx
import { Container, Inset, Stack, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Stack gap="3">
      <Container size="narrow">
        <Inset space="4" {...styles.card()}>
          With gutter
        </Inset>
      </Container>
      <Container gutter={false} size="narrow">
        <Inset space="4" {...styles.card()}>
          Without gutter
        </Inset>
      </Container>
    </Stack>
  )
}

namespace styles {
  export const card = style({ backgroundColor: 'background.surface', borderRadius: '4xl' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Container/Gutter.tsx)

## Guidelines

TODO: Write guidelines for Container.