Stack

Stack is a layout component that places elements on top of each other. It's useful for creating overlapping UI elements with a consistent stacking context.

Basic Usage

Without Stack
1
2
3
With Stack
1
2
3
Code Example
Basic.vue

A comparison of stacked and non-stacked elements using the Stack component.

Stack

The Stack component places elements on top of each other in a stacking context. It's useful for creating overlapping UI elements like cards with badges, images with captions, or any design that requires layering.

Stack Props Type Description
is
string

Allows changing the element tag. Default is div.

Stack Slots Description
default

The default slot. Elements placed here will be stacked on top of each other.

Examples

Cards

Stacking cards to create an overlapping card UI.

A
B
C
Code Example
Cards.vue

Cards with Shadows

Stacked cards with shadow effects for depth.

A
B
C
Code Example
CardsShadows.vue

Colored Cards

Stacked cards with different background colors.

Notification 1

You have 3 unread messages. Tap here to see.

Notification 2

You have 3 unread messages. Tap here to see.

Notification 3

You have 3 unread messages. Tap here to see.
Code Example
CardsColored.vue

Images

Stacking images to create an overlapping avatar or gallery effect.

Image 1Image 2Image 3
Code Example
Images.vue