Container

Foundational content layout component, defining max-widths and responsive padding.

Installation

pnpm add @wandercom/design-system-web

Usage

import { Container } from '@wandercom/design-system-web/ui/container';

export function Example() {
  return (
    <Container>
      <div>Content goes here</div>
    </Container>
  );
}

Choosing a layout

Three layout variants for different content types.

Default layout

Standard layout for general page content.

<Container layout="default">
  <div>Standard layout</div>
</Container>

Max width: 1576px

Narrow layout

Narrow layout for pages that require less horizontal space.

<Container layout="narrow">
  <div>Narrow layout</div>
</Container>

Max width: 664px

Wide layout

Wider layout for pages that require more horizontal space.

<Container layout="wide">
  <div>Wide layout</div>
</Container>

Max width: 1832px

Full layout

Full-screen layout (no max-width):

<Container>
  <div>Full layout</div>
</Container>

Max width: (none)

Props

layout

"default" | "wide" | "full"
Layout variant. Use 'default' for general content, wide for content that requires additional horizontal space (such as property grids), or full for pages that require all available horizontal screen real-estate. Defaults to 'default'.

asChild

boolean
Renders child and merges props instead of rendering a div element. Uses Radix UI Slot.

className

string
Additional CSS classes.
Container