Components

Stack

The Stack component is a low-level primitive used to layout items in a horizontal or vertical stack, with even spacing between the items.

By default, the Stack component will distribute items vertically using space token 300 (8px) between the items.

import { Stack } from '@sproutsocial/racine'

Stacks can also be distributed along on the horizontal axis:

The spacing between items in the stack can be adjusted using Seeds tokens. In this example, a space value of 600 is used (40px), as well as a center alignment:

Properties

NameTypeDefaultDescriptionRequired?
space
TypeSpace
300
Amount of space between items in the stack
align
"left" | "center" | "right" | "stretch"
"left"
Alignment of the items in the stack (horizontal or vertical)
direction
"vertical" | "horizontal"
"vertical"
Axis upon which the stack is laid out (left, center, right, or stretch)
childrenReact.Node