Overview | Stack | Made with Supernova

Design

n/a

React

Up to date

Flutter

Update required

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.

Card - Component with predefined properties that displays and groups related content.

Horizontal Stack - Component that provides structure and layout for other components.

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
	Horizontal	Sets a horizontal direction for stack items.
	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
	Start (Default)	Aligns the stack with the start (or top) of the container.
	Center	Aligns the stack with the center of the container.
	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
	Default	The space in between individual items is inflexible and defined by spacing tokens.
	Space between	Items are evenly distributed within the stack.
	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
	Start (Default)	All items in a stack are aligned to the start of the container.
	Center	All items in a stack are aligned to the center of the container.
	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.

Stack

Component Status