Stack visually puts elements on top of each other.
Class name | Type | |
---|---|---|
stack | Component | Puts the children elements on top of each other |
stack-top | Modifier | Aligns the children elements to the top |
stack-bottom | Modifier | Aligns the children elements to the bottom [Default] |
stack-start | Modifier | Aligns the children elements to the start (horizontally) |
stack-end | Modifier | Aligns the children elements to the end (horizontally) |
You can use
w-*
andh-*
classes to set the width and height of the stack, making all items the same size.
<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 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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
You have 3 unread messages. Tap here to see.
You have 3 unread messages. Tap here to see.
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>
<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>