Skip to main content
WireKit
Copy for LLM

Container

A width-constrained wrapper that centers content horizontally. Use it to control the maximum width and inline padding of page sections.

Basic Usage

Default container (xl)
This content is constrained to the default max width (xl = 80rem) and centered. 
<x-wirekit::container>
    <x-wirekit::card><x-wirekit::card.body>This content is constrained to the default max width (xl = 80rem) and centered.</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::container>

Max Width Sizes

The max prop controls the maximum width of the container. All sizes use design tokens with sensible fallbacks.

Small container
max="sm" — 40rem 
<x-wirekit::container max="sm">
    <x-wirekit::card><x-wirekit::card.body>max="sm" — 40rem</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::container>
Medium container
max="md" — 48rem 
<x-wirekit::container max="md">
    <x-wirekit::card><x-wirekit::card.body>max="md" — 48rem</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::container>
Large container
max="lg" — 64rem 
<x-wirekit::container max="lg">
    <x-wirekit::card><x-wirekit::card.body>max="lg" — 64rem</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::container>
Full width container
max="full" — no width limit 
<x-wirekit::container max="full">
    <x-wirekit::card><x-wirekit::card.body>max="full" — no width limit</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::container>

Padding

Control the horizontal padding with the padding prop. Useful for ensuring content doesn't touch screen edges on smaller viewports.

No padding
No horizontal padding 
<x-wirekit::container padding="none">
    <x-wirekit::card><x-wirekit::card.body>No horizontal padding</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::container>
Large padding
padding="lg" — 1.5rem horizontal padding 
<x-wirekit::container padding="lg">
    <x-wirekit::card><x-wirekit::card.body>padding="lg" — 1.5rem horizontal padding</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::container>

Without Centering

By default the container is centered via mx-auto. Set :center="false" to disable this.

Left-aligned container
This container is not centered — it stays left-aligned. 
<x-wirekit::container :center="false" max="md">
    <x-wirekit::card><x-wirekit::card.body>This container is not centered — it stays left-aligned.</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::container>

Semantic Elements

Use the as prop to render a semantic HTML element instead of a div.

Container as section
Rendered as a section element for semantic HTML. 
<x-wirekit::container as="section">
    <x-wirekit::card><x-wirekit::card.body>Rendered as a section element for semantic HTML.</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::container>

Props

Prop Type Default Description
max string 'xl' Max width: sm, md, lg, xl, 2xl, full
padding string 'md' Horizontal padding: none, sm, md, lg, xl
center bool true Center the container horizontally with mx-auto
as string 'div' HTML element to render
scope string|null null Scoped personalization name

Keyboard Interaction

This component is a layout wrapper. Keyboard interaction is delegated to its children.

Design Tokens

The container sizes use dedicated tokens with CSS fallbacks:

Token Default Description
--size-wk-container-sm 40rem Small container max width
--size-wk-container-md 48rem Medium container max width
--size-wk-container-lg 64rem Large container max width
--size-wk-container-xl 80rem XL container max width
--size-wk-container-2xl 96rem 2XL container max width

Padding tokens:

Token Default Description
--space-wk-sm 0.5rem Small horizontal padding
--space-wk-md 1rem Medium horizontal padding
--space-wk-lg 1.5rem Large horizontal padding
--space-wk-xl 2.5rem XL horizontal padding

Was this page helpful?

Voting requires cookies or local storage. What we store