Stack

Overview

Creates a single dimension row or column from the items you provide. The items will not wrap on overflow. So use it only to display a limited list of items. You can however flip the orientation on certain breakpoints.

The following example lays out three Text elements vertically.

Orientation

Use the orientation property to select the direction in which the items are laid out. This property accepts responsive values.

By default the items are laid out in a vertical column. Here's an example of a horizontal stack:

Spacing

Use the spacing property to adjust the spacing between the items. By default, the items have no spacing. This property accepts responsive values.

Here's an example of tags with a $500 spacing:

Alignment

The alignment property allows placing items across the direction of orientation, i.e., for a horizontal stack it controls the vertical alignment of the items, and for a vertical stack it controls the horizontal alignment of the items. This property accepts responsive values.

Here's a few alignment options for a vertical stack.

Here's a few alignment options for a horizontal stack.

Mia Sabinus

---

Mia Sabinus

---

Mia Sabinus

View code

Open in Playroom

Justification

The justification property aligns items along the direction of orientation. For a horizontal stack, it controls the horizontal alignment of the items. For a vertical stack, it controls the vertical alignment of the items. This property accepts responsive values.

Here's a few justification options for a horizontal stack.

Here's a few justification options for a vertical stack.

Mia

Dietician

Mia

Dietician

Mia

Dietician

Mia

Dietician

View code

Open in Playroom

Reversing Items Order

Add a reverse property to reverse the displaying order of the items. This only affects the ordering visually, not the order in the document. For instance, the tab order is preserved.

Dividers

Use dividers to add a divider between items in a vertical stack. This property accepts responsive values.

Here's an example of dividers in a vertical stack.

Here's an example of dividers in a horizontal stack.

API