Stack

The stack component is useful to divide your block content into horizontal areas, which can contain almost any other elements such as title, a button, a text input, or just simple text.

Introduction

The structure of a stack is the following: stack is your main container, following with each individual stack item. They need to be a direct child of the stack container.

Stack component has a number of different properties for using with a stack container. There are four in particular that define the overall layout that the component has: direction, alignment, spacing and colors.

Below is a simple example of a button with tailing icon: the button is our stack container following with two direct stack items.

With stack component you can do pretty much everything from media list to sidebar navigation, the possibilities are endless:

Calvin Hawkins
calvin.hawkins@example.com

Types

Stack component can be used in three different ways: default, select and links.

Default

In most case you will use stack items children within your stack container:

1
2
3

Direction

Direction refers to whether the stacking of children components is horizontal or vertical. By default the stack component is horizontal, but can be turned vertical by adding the stack-vertical modifier when using the component.

Horizontal

In most case stack will be horizontal, you can omit the horizontal modifier here as the browser default is row.

1
2
3

Vertical

Sometime you will need to force your stack items to be vertically aligned, simply use stack-vertical modifier.

1
2
3

Alignment

Alignment refers to how the children components are aligned inside the container by using some flexbox related properties. These options are applied on specific children of the flexbox instead of being applied on the container.

Stack container

Flex

If you want your stack items to have have an equal width, no matter the number of stack items, use stack-flex.

1
2
3

Fill

Use the stack-fill class to force stack items to have the height of content height.

1
2
3

Stack items

Each individual stack items can take different properties to help you create complex layout inside your stack container.

Flex

Use .stack-flex to toggle a flex item’s ability to grow to fill available space. In the example below, the middle element uses all available space it can, while allowing the remaining two flex items their necessary space.

1
2
3

Leading / Tailing

You can easily align contents with stack-item-lead to the left side and with stack-item-tail to the right side to create your appbar component for example.

lead
1
2
tail

Below is a simple example of how to move the first one to the top and the last one to the bottom of a stack container:

lead
1
2
tail

Spacing

Spacing refers to the space that exists between children components inside the stack container.

You can easily create gaps between your stack items with gutter-x-{size}. In this example we just used gutter-x-3:

1
2
3

If you use stack-vertical modifier, you need to use gutter-y-{size} instead.

Colors

Colors means you can style your stack children components with contextual classes that are available through the Nova brand colors.

1
2
3
On this page