Container
Max-width wrapper for page sections.
<arc-container>Overview
Container constrains width. It centers its children horizontally with margin-inline: auto and caps their width at the --max-width design token (1120px by default), and adds inline padding via --space-lg. Wrap every landing page hero, documentation section, and dashboard content area in a Container to keep line lengths readable and horizontal spacing uniform.
The narrow boolean prop switches the max-width constraint to --max-width-sm (typically 720px), which suits article-style content, blog posts, and focused forms where shorter lines read better. That one toggle covers the two most common content widths without custom CSS.
Container exposes a container CSS part on the inner wrapper, so you can target it with ::part(container) for one-off adjustments. Because the component uses padding-inline rather than fixed margins, it works in RTL layouts and leaves vertical spacing to the parent or sibling components like Section.
Guidelines
When to use
- Wrap every full-width page section in a Container to maintain consistent margins
- Use the narrow prop for blog posts, articles, and single-column forms
- Nest Container inside Section when you need both vertical spacing and width constraints
- Rely on the --max-width and --max-width-sm tokens for global width changes
- Combine with DashboardGrid or other grid components for structured inner layouts
When not to use
- Do not nest Containers inside other Containers; a single wrapper per content band is enough
- Do not override padding-inline with fixed pixel values; adjust the --space-lg token instead
- Do not use Container as a flex or grid parent; it is a block-level width constraint only
- Do not apply background colors directly to Container; wrap it in a full-bleed div for colored bands
- Do not confuse Container with PageLayout. Container constrains width; PageLayout manages column structure
Features
- Centers content with margin-inline: auto and respects the `--max-width` token
- Narrow mode switches to `--max-width-sm` for article and form layouts
- Consistent inline padding via `--space-lg` design token
- RTL-safe layout using logical properties (padding-inline, margin-inline)
- Exposes a container CSS part for targeted ::part() styling
- Leaves block spacing to parent layout components
- Wrapper with no JavaScript
Preview
Default container — max-width: var(--max-width)
Narrow container — max-width: var(--max-width-sm)
Usage
<arc-container>
<p>Content constrained to 1120px</p>
</arc-container>
<arc-container narrow>
<p>Content constrained to 720px</p>
</arc-container>import { Container } from '@arclux/arc-ui-react';
export default function Example() {
return (
<Container>
<p>Content constrained to 1120px</p>
</Container>
);
}<script setup>
import { Container } from '@arclux/arc-ui-vue';
</script>
<template>
<Container>
<p>Content constrained to 1120px</p>
</Container>
<Container narrow>
<p>Content constrained to 720px</p>
</Container>
</template><script>
import { Container } from '@arclux/arc-ui-svelte';
</script>
<Container>
<p>Content constrained to 1120px</p>
</Container>
<Container narrow>
<p>Content constrained to 720px</p>
</Container>import { Component } from '@angular/core';
import { Container } from '@arclux/arc-ui-angular';
@Component({
imports: [Container],
template: `
<arc-container>
<p>Content constrained to 1120px</p>
</arc-container>
<arc-container narrow>
<p>Content constrained to 720px</p>
</arc-container>
`,
})
export class MyComponent {}import { Container } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<>
<Container>
<p>Content constrained to 1120px</p>
</Container>
<Container narrow>
<p>Content constrained to 720px</p>
</Container>
</>
);
}import { Container } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<>
<Container>
<p>Content constrained to 1120px</p>
</Container>
<Container narrow>
<p>Content constrained to 720px</p>
</Container>
</>
);
}<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-container — requires container.css + base.css (or arc-ui.css) -->
<div class="arc-container">
<div class="container">Container</div>
</div><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-container — self-contained, no external CSS needed -->
<div class="arc-container" style="display: block">
<div style="width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 24px">Container</div>
</div>API
narrowbooleanfalse- Use the narrow max-width (720px vs 1120px)
size'sm' | 'md' | 'lg' | 'xl' | 'full''md'- Controls the maximum width.
padding'none' | 'sm' | 'md' | 'lg''md'- Controls inline padding.
See Also
- SectionPage section with optional uppercase label, consistent spacing.
- StackFlexbox layout component for vertical or horizontal stacking with token-based spacing.
- Page LayoutPage structure primitive that arranges content into sidebar-left, sidebar-right, centered, or wide layouts using CSS Grid. Handles responsive collapse, configurable gap and max-width, and exposes named slots for sidebar, main, and aside regions.