Container — ARC UI

Components

Container

layout

static

<arc-container>

Overview

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

Nest Containers inside other Containers -- a single wrapper per content band is sufficient
Override padding-inline with fixed pixel values; adjust the --space-lg token instead
Use Container as a flex or grid parent -- it is a block-level width constraint only
Apply background colors directly to Container; wrap it in a full-bleed div for colored bands
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
Zero vertical opinion -- leaves block spacing to parent layout components
Lightweight wrapper with no JavaScript interactivity overhead

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';

<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: `
    <Container>
      <p>Content constrained to 1120px</p>
    </Container>
    
    <Container narrow>
      <p>Content constrained to 720px</p>
    </Container>
  `,
})
export class MyComponent {}

import { Container } from '@arclux/arc-ui-solid';

<Container>
  <p>Content constrained to 1120px</p>
</Container>

<Container narrow>
  <p>Content constrained to 720px</p>
</Container>

import { Container } from '@arclux/arc-ui-preact';

<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

Prop	Type	Default	Description
`narrow`	`boolean`	`false`	Use the narrow max-width (720px vs 1120px)
`size`	`string`	`'md'`	Controls the maximum width. Options: 'sm', 'md', 'lg', 'xl', 'full'.
`padding`	`string`	`'md'`	Controls inline padding. Options: 'none', 'sm', 'md', 'lg'.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight