naUIContainer
Responsive page container widths.
Default container
na-container centres content and applies the standard max-width (--na-container-xl, 1280px) with responsive horizontal padding.
.na-container - max-width 1280px, centred
<div class="na-container">
<!-- content constrained to 1280px -->
</div>Size variants
Modifier classes shrink the container's max-width without touching the padding.
| Class | Token | Default value |
|---|---|---|
na-container | --na-container-xl | 1280px |
na-container na-container-s | --na-container-s | 640px |
na-container na-container-m | --na-container-m | 768px |
na-container na-container-l | --na-container-l | 1024px |
na-container na-container-2xl | --na-container-2xl | 1536px |
na-container na-container-fluid | - | 100% |
<!-- Narrow prose/article container -->
<div class="na-container na-container-m">
<p>Readable line length for long-form content.</p>
</div>
<!-- Full-bleed -->
<div class="na-container na-container-fluid">
<div class="na-bg-dark na-padding-y-8">Full width band</div>
</div>Padding tokens
The horizontal padding responds to viewport width via CSS media queries so content never touches the screen edge on mobile.
| Breakpoint | --na-container-pad value |
|---|---|
| < 640px | 1rem (na-space-4) |
| 640px - 1023px | 1.5rem (na-space-6) |
| = 1024px | 2rem (na-space-8) |