Stack

Stacks pieces one below the other, with the same scale space between all of them.

On this page

Playground

123

Space (gap)

Alignment

Background

HTML

<div class="feitio-stack" data-gap="1"><span class="lay-box">1</span><span class="lay-box">2</span><span class="lay-box">3</span></div>

When to use

Whenever there is space between pieces: space belongs to the parent, and only a step of the scale.

When not to use

For a component’s inner padding: it comes ready.
With a hand-written margin alongside: never; the check fails it.

Examples

Piece 1Piece 2Piece 3

Stack

Three pieces at space-3.

Show code

HTML

<div class="feitio-stack" data-gap="3">
  …
</div>

React

<Stack gap={3}>
  …
</Stack>

One space per level

The closer, the more together: between the parts, a large space (6); inside each part, a small one (2). One Stack inside the other, each with its own.

Show code

HTML

<div class="feitio-stack" data-gap="6">
  <div class="feitio-stack" data-gap="2">…</div>
  <div class="feitio-stack" data-gap="2">…</div>
</div>

Attributes

Attribute	Values	What for
`class="feitio-stack"`	required	The layout.
`data-gap`	`1` to `7`	The space between pieces. In React, no other value compiles.
`align`	`"start"`, `"center"`	How pieces align horizontally.

The rules and a whole form built with all three are in Layout.