Stack

The <Stack> component is a responsive layout component based on CSS Flexbox. The stack is basically a flexbox column that acts as a container that aligns its children vertically in new lines. The component should be used wherever you need to arrange elements stacked on top of each other.

Use the stack component in combination with other layout components to easily create customized layouts.

Usage

The use of <Stack> is recommended if you have two or more elements that must be the same distance apart. For the space you have to use our supported space values.

In this example you can see, the space prop ensures that each child is separated by the same space which maintains visual consistency.

Preview

Code

Stack as list

The <Stack> component can also be used to render a list of items. This is useful for screen readers and accessibility. To use the stack as a list, you need to set the asList property to true. This will render each child as a list item.

Different alignment

Of course you can align the elements inside of the stack vertically and horizontally. This is useful if you need to place certain items at a certain position. For vertical alignment you need to set the alignY property and the stretch property to true. The stretch property stretches the stack to fill the space of the parent element.

With the vertical align you can align the children on top, center or bottom.

Preview

Code

Top

Center

Bottom

For horizontal alignment of the children, the children need to have a defined width given so it can align inside the stack container.

To align the children horizontal you have to use the alignX property. Options are right, center and left.

Preview

Code

Left

Center

Right

Nested stacks

Sometimes you may need complexer layouts to arrange your elements, with the stack component you can also nest stacks within stacks. So you can build complex structures and constructs but without breaking the layout.

The following example shows how stacks can be nested within each other. You see how a stack will behave with a inline and split component.

Preview

Code

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

View Stack stories

alignX?

"left" | "center" | "right";

Horizontal alignment for the children.

alignY?

"center" | "top" | "bottom";

Vertical alignment for the children.

aria-describedby?

string;

Identifies the element (or elements) that describes the object.

aria-details?

string;

Identifies the element (or elements) that provide a detailed, extended description for the object.

aria-label?

string;

Defines a string value that labels the current element.

aria-labelledby?

string;

Identifies the element (or elements) that labels the current element.

aria-live?

"off" | "polite" | "assertive";

Indicates the level of importance for updates in the live region.

'off': Updates are not announced unless focused.
'polite': Updates are announced when the user is idle.
'assertive': Updates are announced immediately, interrupting other announcements.

asList?

boolean;

Prop to make the stack rendered as a list element. Useful for screen readers and accessibility.

Defaults to:

"false"

children?

ReactNode;

Children of the component.

id?

string;

The element's unique identifier. See MDN.

role?

"region" | (string & {});

Identifies the element a significant section of content for easier navigation. When region is used as a role, an aria-label or aria-labelledby must be provided. See MDN.

space?