Container

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

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>
  );
}

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.

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 inside a capped Container is capped too; use width="full" to give it more room.

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

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

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

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:

.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.

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