Components

Stack

The Stack component is used to position elements on top of one another in a visually layered manner.

Variants

Without stack

The following example displays div's without stacking.

1
2
3

With stack

Wrap the stacked div's with a wrapper div using the component class `stack`.

1
2
3

Animated stack

Apply the modifier class stack-animated to enable animation on hover.

1
2
3

Positions

Bottom (default)

By default, the stacking direction is from the bottom.

1
2
3

Bottom start

Apply the modifier class `stack-bottom-start` to set the stack direction to bottom-start.

1
2
3

Bottom end

Apply the modifier class `stack-bottom-end` to set the stack direction to bottom-end.

1
2
3

Top

Apply the modifier class `stack-top` to set the stack direction to top.

1
2
3

Top start

Apply the modifier class `stack-top-start` to set the stack direction to top-start.

1
2
3

Top end

Apply the modifier class `stack-top-end` to set the stack direction to stack-end.

1
2
3

Start

Apply the modifier class `stack-start` to set the stack direction to start.

1
2
3

End

Apply the modifier class `stack-end` to set the stack direction to end.

1
2
3

Illustrations

Stacked images

The example below demonstrates a stack with images.

iphone sydney rome

Stacked cards

The example below demonstrates a stack with cards.

Card A

Card B

Card C

Stacked notifications

The example below demonstrates a notifications stack.

3 Notifications

You have 3 unread messages. Tap here to see.

2 Notifications

You have 2 unread messages. Tap here to see.

Notification 1

You have an unread message. Tap here to see.

Class referenceThe component, style, color, state, size and modifier classes available for this component.
ClassTypeDescription
stackcomponentStacks the child elements on top of each other.
stack-startplacementSets stacking direction to start.
stack-endplacementSets stacking direction to end.
stack-bottom-startplacementSets stacking direction to bottom-start.
stack-bottom-endplacementSets stacking direction to bottom-end.
stack-topplacementSets stacking direction to top.
stack-top-startplacementSets stacking direction to top-start.
stack-top-endplacementSets stacking direction to top-end.
stack-animatedplacementAdds animation to stack when hovered over.