title: Container storybookPath: page-layout-container--default isExperimentalPackage: false

The container centers and constrains the maximum width of the content it wraps.

<Container size="small">
  <Placeholder height={64} />
</Container>

Examples

Size

Use the size prop to adjust the maximum width of the container.

<Stack gap="large">
  <Container size="xsmall">
    <Placeholder label="xsmall" height={64} />
  </Container>
  <Container size="small">
    <Placeholder label="small" height={64} />
  </Container>
  <Container size="medium">
    <Placeholder label="medium" height={64} />
  </Container>
  <Container size="large">
    <Placeholder label="large" height={64} />
  </Container>
</Stack>

Props