Stack

Stacks its children vertically with one consistent gap between them.

Example

View Code 
<div class="stack" data-gap="lg">
    <h2>A heading</h2>
    <p>A paragraph that follows it at the stack's gap, not the prose gap.</p>
    <p>Another paragraph.</p>
    <p data-split>Pushed to the bottom when the stack has room.</p>
</div>

When to use it

Reach for a stack whenever things sit one above another and should be spaced evenly: the sections of a card, the fields of a form, the parts of a sidebar. Nest stacks with different gaps to express hierarchy: a large gap between sections, a small one inside each.

How it works

The stack is a flex column with a gap, so the space between children is the stack's decision and children's own margins are zeroed. data-align controls horizontal alignment. Give one child data-split and it, with everything after it, moves to the end whenever the stack is taller than its content, which is how a card keeps its actions at the bottom. Add data-fill and the stack is at least as tall as the viewport, which with a data-split footer is the whole of a sticky footer.

<div class="stack" data-gap="sm" data-align="start">
    <h3>Title</h3>
    <p>Body</p>
    <a href="#" data-split>Action</a>
</div>

Why this name

No other word says it as plainly: things stacked, one on another. Foundation 6 had no equivalent; the space between blocks came from each element's own margins.

Attributes

Attribute Type Values Default Description
data-gap enum none, xs, sm, md, lg, xl, 2xl, 3xl, xs-sm, xs-md, xs-lg, xs-xl, xs-2xl, xs-3xl, sm-md, sm-lg, sm-xl, sm-2xl, sm-3xl, md-lg, md-xl, md-2xl, md-3xl, lg-xl, lg-2xl, lg-3xl, xl-2xl, xl-3xl, 2xl-3xl md Space between children. A pair such as sm-lg grows fluidly from the first stop to the second.
data-align enum start, center, end, stretch, baseline stretch Horizontal alignment of the children.
data-fill boolean Make the stack at least as tall as the viewport, so a child carrying data-split reaches the bottom.

Markers

Attributes that descendants carry, not the root.

Attribute Type Values On Description
data-split boolean > * Pushes the child and everything after it to the end of the stack when the stack is taller than its content.

Children

  • > *: at least 1. Anything. Each child's margins are reset; the stack owns the space between them.
  • > [data-split]: 0 to 1. At most one child may carry data-split; it and everything after it are pushed to the end of the stack when the stack is taller than its content.

Tokens

Token Description
--yeti-space-md The default gap.
--yeti-cover-height The minimum block size when data-fill is set.
Internal tokens (may change between minor versions) - `--_yeti-gap` - `--_yeti-align`

Accessibility

  • Purely visual. Reading order is source order.

Browser support

  • Used without guards: flexbox gap
  • Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.