Container
Max-width plus centering with a horizontal gutter — the wrapper every page-level layout starts from, with a Bootstrap-style responsive breakpoint mode.
zyra-container
API
All inputs and configuration options for zyra-container.
| Prop | Type | Default | Description |
|---|---|---|---|
maxWidth | ContainerMaxWidth | 'xl' | Preset width, or "responsive" for breakpoint-driven widths |
centered | boolean | true | Auto left/right margins |
fluid | boolean | false | Removes the max-width constraint entirely |
noGutters | boolean | false | Removes horizontal gutter padding |
paddingX | BoxSpacing | ContainerResponsivePadding | 'md' | Horizontal gutter, responsive-capable |
Tokens
CSS custom properties zyra-container reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Border--zyra-color-border-color | var(--zyra-color-border) | Border color shown when the border input is enabled. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Purely visual layout — has no semantic role of its own