Layout Utilities

Container

Centered max-width wrapper:

<div class="container">Full-width content (max 3072px)</div>
<div class="container container--xl">1280px max</div>
<div class="container container--lg">1024px max</div>
<div class="container container--md">768px max</div>
<div class="container container--sm">640px max</div>

Stack

Vertical flex layout with gap:

<div class="stack">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
</div>

<!-- Gap variants -->
<div class="stack stack--sm">...</div>   <!-- 0.5rem gap -->
<div class="stack stack--lg">...</div>   <!-- 1.5rem gap -->
<div class="stack stack--xl">...</div>   <!-- 2rem gap -->
<div class="stack stack--2xl">...</div>  <!-- 3rem gap -->

Cluster

Horizontal wrapping flex layout:

<div class="cluster">
  <ac-badge variant="success">Tag 1</ac-badge>
  <ac-badge variant="info">Tag 2</ac-badge>
  <ac-badge>Tag 3</ac-badge>
</div>

<!-- Gap variants -->
<div class="cluster cluster--sm">...</div>
<div class="cluster cluster--lg">...</div>

Center

Grid-based centering:

<div class="center min-h-screen">
  <ac-card>Centered content</ac-card>
</div>

Section

Vertical padding block:

<section class="section">Default (4rem)</section>
<section class="section section--sm">Small (2rem)</section>
<section class="section section--lg">Large (6rem)</section>
<section class="section section--xl">XL (8rem)</section>

Grid helpers

<div class="grid-2"><!-- 2 columns --></div>
<div class="grid-3"><!-- 3 columns --></div>
<div class="grid-auto"><!-- auto-fill min 280px --></div>

Industrial background

<section class="bg-industrial min-h-screen">
  <!-- Dark bg with subtle grid pattern -->
</section>