Stack
Stack visually puts elements on top of each other.
You can use
w-*andh-*classes to set the width and height of the stack, making all items the same size.
1
2
3
<div class="$$stack h-20 w-32">
<div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
<div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
<div class="bg-secondary text-secondary-content grid place-content-center rounded-box">
3
</div>
</div><div class="$$stack h-20 w-32">
<div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
<div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
<div class="bg-secondary text-secondary-content grid place-content-center rounded-box">
3
</div>
</div>
<div class="$$stack w-48">
<img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" class="rounded-box" />
<img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" class="rounded-box" />
<img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" class="rounded-box" />
</div><div class="$$stack w-48">
<img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" class="rounded-box" />
<img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" class="rounded-box" />
<img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" class="rounded-box" />
</div>A
B
C
<div class="$$stack size-28">
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">A</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">B</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">C</div>
</div>
</div><div class="$$stack size-28">
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">A</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">B</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">C</div>
</div>
</div>A
B
C
<div class="$$stack $$stack-top size-28">
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">A</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">B</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">C</div>
</div>
</div><div class="$$stack $$stack-top size-28">
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">A</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">B</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">C</div>
</div>
</div>A
B
C
<div class="$$stack $$stack-start size-28">
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">A</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">B</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">C</div>
</div>
</div><div class="$$stack $$stack-start size-28">
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">A</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">B</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">C</div>
</div>
</div>A
B
C
<div class="$$stack $$stack-end size-28">
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">A</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">B</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">C</div>
</div>
</div><div class="$$stack $$stack-end size-28">
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">A</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">B</div>
</div>
<div class="border-base-content $$card bg-base-100 border text-center">
<div class="$$card-body">C</div>
</div>
</div>A
B
C
<div class="$$stack">
<div class="$$card bg-base-200 text-center shadow-md">
<div class="$$card-body">A</div>
</div>
<div class="$$card bg-base-200 text-center shadow">
<div class="$$card-body">B</div>
</div>
<div class="$$card bg-base-200 text-center shadow-sm">
<div class="$$card-body">C</div>
</div>
</div><div class="$$stack">
<div class="$$card bg-base-200 text-center shadow-md">
<div class="$$card-body">A</div>
</div>
<div class="$$card bg-base-200 text-center shadow">
<div class="$$card-body">B</div>
</div>
<div class="$$card bg-base-200 text-center shadow-sm">
<div class="$$card-body">C</div>
</div>
</div>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.
<div class="$$stack">
<div class="$$card shadow-md bg-base-100">
<div class="$$card-body">
<h2 class="$$card-title">Notification 1</h2>
<p>You have 3 unread messages. Tap here to see.</p>
</div>
</div>
<div class="$$card shadow-md bg-base-100">
<div class="$$card-body">
<h2 class="$$card-title">Notification 2</h2>
<p>You have 3 unread messages. Tap here to see.</p>
</div>
</div>
<div class="$$card shadow-md bg-base-100">
<div class="$$card-body">
<h2 class="$$card-title">Notification 3</h2>
<p>You have 3 unread messages. Tap here to see.</p>
</div>
</div>
</div><div class="$$stack">
<div class="$$card shadow-md bg-base-100">
<div class="$$card-body">
<h2 class="$$card-title">Notification 1</h2>
<p>You have 3 unread messages. Tap here to see.</p>
</div>
</div>
<div class="$$card shadow-md bg-base-100">
<div class="$$card-body">
<h2 class="$$card-title">Notification 2</h2>
<p>You have 3 unread messages. Tap here to see.</p>
</div>
</div>
<div class="$$card shadow-md bg-base-100">
<div class="$$card-body">
<h2 class="$$card-title">Notification 3</h2>
<p>You have 3 unread messages. Tap here to see.</p>
</div>
</div>
</div>Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
BLUEPRINT