Stack

Stack components provide rules and structure for other components using flexible layouts. Stacks serve as a layout for components and allow nesting of other stacks and components.

Component Status

Design

n/a

React

Up to date

Flutter

Up to date

Introduction

Use Stacks when you need to layout components by choosing either a horizontal or vertical axis. Stacks are flexible in order to cover a wide range of scenarios.

  1. Card - Component with predefined properties that displays and groups related content.
  2. Horizontal Stack - Component that provides structure and layout for other components.
  3. Stack Items - Used inside of a stack to contain other nested components or stacks.

Examples

Stack components have a variety of predefined properties. Below you will find examples of these properties.

Stack Direction

Establishes a horizontal or vertical direction for stack items.

Component

Description

Usage

null

Horizontal

Sets a horizontal direction for stack items.

null

Vertical

Sets a vertical direction for stack items.

Stack Alignment

Sets the alignment of stack items within the horizontal or vertical direction.

Component

Description

Usage

null

Start (Default)

Aligns the stack with the start (or top) of the container.

null

Center

Aligns the stack with the center of the container.

null

End

Aligns the stack with the end (or bottom) of the container.

Item Distribution

Sets the horizontal or vertical distribution of items inside a stack.

Component

Description

Usage

null

Default

The space in between individual items is inflexible and defined by spacing tokens.

null

Space between

Items are evenly distributed within the stack.

null

Stretch

Items are stretched equally to fill any available space in addition to predefined spacing between them.

Item Alignment

Sets the horizontal or vertical alignment of items inside a stack.

Component

Description

Usage

null

Start (Default)

All items in a stack are aligned to the start of the container.

null

Center

All items in a stack are aligned to the center of the container.

null

End

All items in a stack are aligned to the bottom of the container.

Item Properties

A stack item is a part of a stack used to set additional properties. These parameters are separate from the predefined stack definitions.

Property

Description

Type

Dimension

Sets the width or height of a stack item inside a stack, dependent on the direction of the stack.

A percentage value (20%, for example).

Alignment

Changes the vertical or horizontal alignment of a stack item inside a stack, dependent on the direction of the stack.

Start, Center, End

Stack Properties

Stack as a component comes with a predefined set of properties. Some of these props can be modified to fit the desired outcome, and some of these are fixed.

Property

Description

Type

Vertical Alignment

Changes the vertical alignment of stack items inside a stack.

Start, Center, End

Horizontal Alignment

Changes the horizontal alignment of stack items inside a stack.

Start, Center, End

Direction

Sets the direction of the stack items inside a stack.

Horizontal, Vertical

Distribution

Changes the horizontal and vertical distribution of the stack items inside a stack.

Inflexible, Space between, Even, Stretch, Flexible

Breakpoint

Changes the value to trigger vertical item stacking on a user's selected breakpoint range.

XSmall, Small, Medium, Large, XLarge

Spacing

Changes horizontal and/or vertical spacing between stacks and stack items.

Spacing 0, Spacing 25, Spacing 50, Spacing 100, Spacing 150, Spacing 200, Spacing 250, Spacing 300, Spacing 400, Spacing 450, Spacing 500, Spacing 700, Spacing 900, Spacing 1200

Construction

Below you'll find a simplified example of stack construction, an explanation of how to stack components work, and their usage in the process of building a complex card layout.

Step 1

Start with a plain card component and insert the first level of a horizontal stack component. By doing so, you give the card a basic structure.

Step 2

We know that the left column will only contain a single component, so we insert it inside of the stack item. We also know that the right column will contain multiple components in horizontal and vertical order, so we place a nested vertical stack within.

Step 3

We know that the bottom stack item will contain a simple horizontal stack, so we place it within the bottom vertical stack item. The upper item will contain an additional two vertical stacks.

Step 4

The remaining two stack items will both contain a vertical stack, so we place them inside.

Step 5

The construction of the card is now complete. Below you can see the stacks filled with content. Use this process for the construction of other component layouts.