Stack

wf-stack is a single-axis vertical layout primitive. It wraps children in a flex column and lets you control the gap between them with wf-gap-* modifiers — no custom CSS required.

Basic Stack

Default Stack

Children stack vertically with the default no gap applied automatically.

Item 1

Item 2

Item 3

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

Gap Scale

Numeric Scale wf-gap-1 … wf-gap-8

Map gap to design-token steps using integer suffixes.

wf-gap-2

Item A

Item B

Item C

wf-gap-6

Item A

Item B

Item C

<div class="wf-stack wf-gap-2">...</div>
<div class="wf-stack wf-gap-6">...</div>

Semantic Scale wf-gap-sm … wf-gap-xl

Use semantic size tokens for consistent spacing aligned to your design system.

wf-gap-sm

sm

wf-gap-md

md

wf-gap-xl

xl

<div class="wf-stack wf-gap-sm">...</div>
<div class="wf-stack wf-gap-md">...</div>
<div class="wf-stack wf-gap-xl">...</div>

Zero Gap wf-gap-0

Remove all spacing between items — useful when children manage their own borders or padding.

Item A — no gap

Item B — no gap

Item C — no gap

<div class="wf-stack wf-gap-0">
  <div>Item A</div>
  <div>Item B</div>
  <div>Item C</div>
</div>

Nested Stacks

Independent Gap per Level

Each wf-stack sets its own --wf-gap custom property, so nested stacks can have different spacing without interference.

Outer item - wf-gap-xl

Inner A - gap-2

Inner B - gap-2

Outer item - wf-gap-xl

Inner A - gap-5

Inner B - gap-5

<div class="wf-stack wf-gap-xl">
  <div>
    <div class="wf-stack wf-gap-2">
      <div>Inner A</div>
      <div>Inner B</div>
    </div>
  </div>
  <div>
    <div class="wf-stack wf-gap-5">
      <div>Inner A</div>
      <div>Inner B</div>
    </div>
  </div>
</div>

Class Reference

All modifier classes available on .wf-stack

Class Name	Type	Description
wf-stack	Base	Creates a vertical flex column container. Default gap is --wf-space-4 .
wf-gap-0	Spacing	Removes all gaps between children.
wf-gap-1 … wf-gap-8	Spacing	Numeric scale gaps are mapped to design tokens.
wf-gap-3xs … wf-gap-5xl	Spacing	Semantic scale gaps from extra-small to extra-large.