Container

Responsive max-width layout wrapper that automatically centers page content with balanced side margins.

<x-container>

Default Style

Standard live preview and template usage for <x-container>.

Full Page Viewport (100% Canvas Width)

margin: 0 auto • Auto-Centering Gutters

<x-container size="lg"> max-width: 1024px (Standard Page Content)

Hero Section / Main Application Dashboard

Page Body

<x-container size="md"> max-width: 768px (Article / Blog Content)

Optimized single-column reading width with balanced left & right margin gutters.

<x-container size="sm"> max-width: 640px (Auth Card / Form)

Centered narrow card for Login, Register & Checkout Modals

{{-- Small centered container --}}
<x-container size="sm">
    <p>Narrow content area (640px max)</p>
</x-container>

{{-- Default large container --}}
<x-container size="lg">
    <p>Standard page content (1024px max)</p>
</x-container>

{{-- Full width --}}
<x-container size="full" :center="false">
    <p>Edge-to-edge layout</p>
</x-container>

← Previous Divider Next → Footer