Stack

Defines the vertical rhythm of its child elements, interleaving a uniform amount of space between each element.

Alternatives

Box — For custom layouts.

Spacing

The spacing between children can be adjusted using the space prop.Responsive values are supported, e.g. space={{ mobile: 'small', tablet: 'medium', desktop: 'large', wide: 'xlarge' }}

Open in Playroom

Horizontal alignment

Items can be aligned horizontally using the align prop. Responsive values are supported, e.g. align={{ mobile: 'center', tablet: 'left' }}

As a convenience, the align prop also sets the text alignment for the container. This can be overridden by setting alignment explicitly on the relevant Text or Heading component.

left

center

right

Open in Playroom

Semantic elements

By default, Stack renders a div element. You can customise this via the component prop.

<Stack component="span" space="small">
  <Placeholder height={40} />
  <Placeholder height={40} />
</Stack>

Open in Playroom

Braid Logo