Stack

CSS Utilities

Stack

A stack arranges its children in a vertical column with an equal gap between each item, so you don't have to add top or bottom margins to every element you put into it. It's the go-to layout for forms, paragraphs of text, card bodies, and anywhere you want consistent vertical rhythm.

By default, items stretch to fill the stack's width. Pair wa-stack with a wa-gap-* class to control the spacing and a wa-align-items-* class to change how children line up horizontally.

<div class="wa-stack">
  <div></div>
  <div></div>
  <div></div>
</div>

Examples

Link to This Section

Stacks are well suited for forms, text, and ensuring consistent spacing between elements in the document flow.

  
  Remember me on this device
  Log In

<div class="wa-stack">
  <wa-input label="Email">
    <wa-icon slot="start" name="envelope" variant="regular"></wa-icon>
  </wa-input>
  <wa-input label="Password" type="password">
    <wa-icon slot="start" name="lock"></wa-icon>
  </wa-input>
  <wa-checkbox>Remember me on this device</wa-checkbox>
  <wa-button appearance="filled">Log In</wa-button>
</div>

Aragorn's Squash

Altogether unleash weasel mainly well-protected hiding Farthing excuse. Falling pits oil em Hasufel levels weight rides vagabonds? Gamgee hard-won thunder merrier forests treasury. Past birthday lasts lowly there'd woe Woodland pa sun's slaying most handling.

Even the smallest person can change the course of the future. They tempted completely other caves cloven wisest draught scrumptious cook Undómiel friends. Dory crunchy huge sleepless. Unmade took nerves liquor defeated Arathorn.

<div class="wa-stack wa-gap-2xl">
  <h3>Aragorn's Squash</h3>
  <p>
    Altogether unleash weasel mainly well-protected hiding Farthing excuse. Falling pits oil em Hasufel levels weight
    rides vagabonds? Gamgee hard-won thunder merrier forests treasury. Past birthday lasts lowly there'd woe Woodland pa
    sun's slaying most handling.
  </p>
  <p>
    Even the smallest person can change the course of the future. They tempted completely other caves cloven wisest
    draught scrumptious cook Undómiel friends. Dory crunchy huge sleepless. Unmade took nerves liquor defeated Arathorn.
  </p>
</div>

Align Items

Link to This Section

By default, items stretch to fill the inline size of the wa-stack container. You can add any of the following wa-align-items-* classes to an element with wa-stack to specify how items are aligned in the inline direction:

wa-align-items-start
wa-align-items-end
wa-align-items-center
wa-align-items-stretch
wa-align-items-baseline

<div class="wa-grid">
  <div class="wa-stack wa-align-items-start">
    <div style="min-inline-size: 4rem;"></div>
    <div style="min-inline-size: 8rem;"></div>
    <div style="min-inline-size: 6rem;"></div>
  </div>
  <div class="wa-stack wa-align-items-center">
    <div style="min-inline-size: 4rem;"></div>
    <div style="min-inline-size: 8rem;"></div>
    <div style="min-inline-size: 6rem;"></div>
  </div>
  <div class="wa-stack wa-align-items-end">
    <div style="min-inline-size: 4rem;"></div>
    <div style="min-inline-size: 8rem;"></div>
    <div style="min-inline-size: 6rem;"></div>
  </div>
</div>

Gap

Link to This Section

By default, the gap between stack items uses --wa-space-m from your theme. You can add any of the following wa-gap-* classes to an element with wa-stack to specify the gap between items:

wa-gap-0
wa-gap-3xs
wa-gap-2xs
wa-gap-xs
wa-gap-s
wa-gap-m
wa-gap-l
wa-gap-xl
wa-gap-2xl
wa-gap-3xl
wa-gap-4xl
wa-gap-5xl

<div class="wa-grid">
  <div class="wa-stack wa-gap-2xs">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="wa-stack wa-gap-2xl">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Examples

Aragorn's Squash

Align Items

Gap

Quick Links

Recent Searches