# Container

Centers page content with inline gutters and a maximum width. Use it inside `Layout.Main` or any region that needs a centered column.

```tsx
// demo.tsx
import {Container, Text} from '@earendil-works/elanor-react';

// The outline only marks the content box for this demo.
const outline = {
  outline:
    'var(--semantic-dimension-border-width-default) dashed var(--semantic-color-border-primary)',
};

export default function ContainerDemo() {
  return (
    <Container>
      <Text style={outline}>Centered content, capped at 1216px, with 16px gutters.</Text>
    </Container>
  );
}
```

## Usage

```tsx
import {Container} from '@earendil-works/elanor-react';

<Container>Page content</Container>;
```

Content is capped at `semantic.dimension.size.maxWidth.content.large` (1216px) with `semantic.dimension.space.padding.xLarge` gutters (16px). Container fills its parent up to that cap, so it also centers in the space left beside a sidebar. It adds no block padding and renders a `div`, not a landmark.

## Full width

`width="full"` removes the cap and keeps the gutters. The difference shows only in parents wider than 1216px, so there is no live preview. A [Grid](/components/grid.md) inside a capped Container is capped too; use `width="full"` to give it more room.

```tsx
<Container width="full">{/* Uncapped content */}</Container>
```

For edge-to-edge content, omit Container, or combine `width="full"` with `style={{paddingInline: 0}}`.

## Custom element and width

`render` changes the element. `maxInlineSize` includes the gutters (`box-sizing: border-box`).

```tsx
// custom-element.tsx
import {Container, Heading, Text} from '@earendil-works/elanor-react';

// The outline only marks the content box for this demo.
const outline = {
  outline:
    'var(--semantic-dimension-border-width-default) dashed var(--semantic-color-border-primary)',
};

export default function ContainerCustomElement() {
  return (
    <Container
      render={<section aria-labelledby="reading-title" />}
      style={{maxInlineSize: 'var(--semantic-dimension-size-max-width-content-small)'}}
    >
      <div style={outline}>
        <Heading level={3} id="reading-title">
          Release notes
        </Heading>
        <Text>A narrower reading column, rendered as a named section.</Text>
      </div>
    </Container>
  );
}
```

To change the gutters without changing the content cap, adjust the maximum width too:

```css
.wideGutters {
  padding-inline: var(--semantic-dimension-space-padding-xx-large);
  max-inline-size: calc(
    var(--semantic-dimension-size-max-width-content-large) +
      var(--semantic-dimension-space-padding-xx-large) * 2
  );
}
```

Container does not clip wide children; give them their own wrapping or scrolling.

## API

### `Container`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `width` | `'capped' \| 'full'` | `'capped'` | `capped` limits content to 1216px; `full` removes the cap. Both keep the gutters. |

Renders `<div>`. Also accepts its HTML attributes, `ref`, and `render`.