Container
Centered content wrapper with max-width and horizontal padding. Use one class per element.
| Class | Max Width | Use Case |
|---|---|---|
af-container | 90em (1440px) | Default, standard page content |
af-container-xs | 25rem (400px) | Narrow forms, sidebars |
af-container-sm | 40rem (640px) | Narrow content |
af-container-md | 48rem (768px) | Tablet-optimized |
af-container-lg | 64rem (1024px) | Desktop content |
af-container-xl | 80rem (1280px) | Wide layouts |
af-container-2xl | 96rem (1536px) | Extra-wide layouts |
Tip: Use one class only. af-container-xl is enough.
Do not combine af-container af-container-xl.
For responsive sizing, use the responsive suffix: af-container af-container-lg@xl (default on mobile, large at xl breakpoint).
Basic container
Section titled “Basic container”Container content with default max-width (90em / 1440px)
<div class="af-container">
<!-- Content with max-width and centering -->
</div>Container sizes
Section titled “Container sizes”xs - 400px max
sm - 640px max
md - 768px max
lg - 1024px max
xl - 1280px max
<div class="af-container-xs">Extra small (400px max)</div>
<div class="af-container-sm">Small (640px max)</div>
<div class="af-container-md">Medium (768px max)</div>
<div class="af-container-lg">Large (1024px max)</div>
<div class="af-container-xl">Extra large (1280px max)</div>