Stack positions multiple elements with a slight offset to create a layered deck effect. Use it to preview stacked cards, documents, or notification piles.
Basic Stack
1
2
3
<c-lb.stack>
<c-lb.card variant="primary" border class="w-36 text-center"><c-lb.card.body>1</c-lb.card.body></c-lb.card>
<c-lb.card variant="accent" border class="w-36 text-center"><c-lb.card.body>2</c-lb.card.body></c-lb.card>
<c-lb.card variant="secondary" border class="w-36 text-center"><c-lb.card.body>3</c-lb.card.body></c-lb.card>
</c-lb.stack>
Directions
A
B
C
A
B
C
<div class="flex flex-wrap gap-8">
<c-lb.stack direction="top" class="h-28 w-28">
<c-lb.card variant="primary" border class="text-center"><c-lb.card.body>A</c-lb.card.body></c-lb.card>
<c-lb.card variant="accent" border class="text-center"><c-lb.card.body>B</c-lb.card.body></c-lb.card>
<c-lb.card variant="secondary" border class="text-center"><c-lb.card.body>C</c-lb.card.body></c-lb.card>
</c-lb.stack>
<c-lb.stack direction="bottom" class="h-28 w-28">
<c-lb.card variant="primary" border class="text-center"><c-lb.card.body>A</c-lb.card.body></c-lb.card>
<c-lb.card variant="accent" border class="text-center"><c-lb.card.body>B</c-lb.card.body></c-lb.card>
<c-lb.card variant="secondary" border class="text-center"><c-lb.card.body>C</c-lb.card.body></c-lb.card>
</c-lb.stack>
</div>
API Reference
c-lb.stack
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| direction |
top
bottom
start
end
|
- | No | Stack alignment direction |
| Slot Name | Description |
|---|---|
| default | Stacked elements |