Card
Cards are used to group and display content in a way that is easily readable.
| Class name | Type | |
|---|---|---|
| card | Component | Card |
| card-title | Part | Title part |
| card-body | Part | Body part (content) |
| card-actions | Part | Actions part (buttons, etc.) |
| card-border | Style | Adds border to <card> |
| card-dash | Style | dash style |
| card-side | Modifier | The image in <figure> will be on to the side |
| image-full | Modifier | The image in <figure> element will be the background |
| card-xs | Size | Extra small size |
| card-sm | Size | Small size |
| card-md | Size | Medium size (default) |
| card-lg | Size | Large size |
| card-xl | Size | Extra large size |
Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
<div class="$$card bg-base-100 w-96 shadow-md"> <figure> <img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" alt="Shoes" /> </figure> <div class="$$card-body"> <h2 class="$$card-title">Card Title</h2> <p>A card component has a figure, a body part, and inside body there are title and actions parts</p> <div class="$$card-actions justify-end"> <button class="$$btn $$btn-primary">Buy Now</button> </div> </div> </div>
<div class="$$card bg-base-100 w-96 shadow-md">
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes" />
</figure>
<div class="$$card-body">
<h2 class="$$card-title">Card Title</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card bg-base-100 w-96 shadow-md">
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes" />
</figure>
<div class="$$card-body">
<h2 class="$$card-title">Card Title</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card bg-base-100 w-96 shadow-md">
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes" />
</figure>
<div class="$$card-body">
<h2 class="$$card-title">Card Title</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>Xsmall Card
A card component has a figure, a body part, and inside body there are title and actions parts
Small Card
A card component has a figure, a body part, and inside body there are title and actions parts
Medium Card
A card component has a figure, a body part, and inside body there are title and actions parts
Large Card
A card component has a figure, a body part, and inside body there are title and actions parts
Xlarge Card
A card component has a figure, a body part, and inside body there are title and actions parts
<div class="$$card w-96 bg-base-100 $$card-xs shadow-md"> <div class="$$card-body"> <h2 class="$$card-title">Xsmall Card</h2> <p>A card component has a figure, a body part, and inside body there are title and actions parts</p> <div class="justify-end $$card-actions"> <button class="$$btn $$btn-primary">Buy Now</button> </div> </div> </div> <div class="$$card w-96 bg-base-100 $$card-sm shadow-md"> <div class="$$card-body"> <h2 class="$$card-title">Small Card</h2> <p>A card component has a figure, a body part, and inside body there are title and actions parts</p> <div class="justify-end $$card-actions"> <button class="$$btn $$btn-primary">Buy Now</button> </div> </div> </div> <div class="$$card w-96 bg-base-100 $$card-md shadow-md"> <div class="$$card-body"> <h2 class="$$card-title">Medium Card</h2> <p>A card component has a figure, a body part, and inside body there are title and actions parts</p> <div class="justify-end $$card-actions"> <button class="$$btn $$btn-primary">Buy Now</button> </div> </div> </div> <div class="$$card w-96 bg-base-100 $$card-lg shadow-md"> <div class="$$card-body"> <h2 class="$$card-title">Large Card</h2> <p>A card component has a figure, a body part, and inside body there are title and actions parts</p> <div class="justify-end $$card-actions"> <button class="$$btn $$btn-primary">Buy Now</button> </div> </div> </div> <div class="$$card w-96 bg-base-100 $$card-xl shadow-md"> <div class="$$card-body"> <h2 class="$$card-title">Xlarge Card</h2> <p>A card component has a figure, a body part, and inside body there are title and actions parts</p> <div class="justify-end $$card-actions"> <button class="$$btn $$btn-primary">Buy Now</button> </div> </div> </div>
<div class="$$card w-96 bg-base-100 $$card-xs shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Xsmall Card</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end $$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card w-96 bg-base-100 $$card-sm shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Small Card</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end $$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card w-96 bg-base-100 $$card-md shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Medium Card</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end $$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card w-96 bg-base-100 $$card-lg shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Large Card</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end $$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card w-96 bg-base-100 $$card-xl shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Xlarge Card</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end $$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card w-96 bg-base-100 $$card-xs shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Xsmall Card</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end $$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card w-96 bg-base-100 $$card-sm shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Small Card</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end $$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card w-96 bg-base-100 $$card-md shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Medium Card</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end $$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card w-96 bg-base-100 $$card-lg shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Large Card</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end $$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card w-96 bg-base-100 $$card-xl shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Xlarge Card</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end $$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card w-96 bg-base-100 $$card-xs shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Xsmall Card</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end $$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card w-96 bg-base-100 $$card-sm shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Small Card</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end $$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card w-96 bg-base-100 $$card-md shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Medium Card</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end $$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card w-96 bg-base-100 $$card-lg shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Large Card</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end $$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card w-96 bg-base-100 $$card-xl shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Xlarge Card</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end $$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>Card Title NEW
A card component has a figure, a body part, and inside body there are title and actions parts
Fashion
Products
<div class="$$card bg-base-100 w-96 shadow-md"> <figure> <img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" alt="Shoes" /> </figure> <div class="$$card-body"> <h2 class="$$card-title"> Card Title <div class="$$badge $$badge-secondary">NEW</div> </h2> <p>A card component has a figure, a body part, and inside body there are title and actions parts</p> <div class="$$card-actions justify-end"> <div class="$$badge $$badge-outline">Fashion</div> <div class="$$badge $$badge-outline">Products</div> </div> </div> </div>
<div class="$$card bg-base-100 w-96 shadow-md">
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes" />
</figure>
<div class="$$card-body">
<h2 class="$$card-title">
Card Title
<div class="$$badge $$badge-secondary">NEW</div>
</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions justify-end">
<div class="$$badge $$badge-outline">Fashion</div>
<div class="$$badge $$badge-outline">Products</div>
</div>
</div>
</div>
<div class="$$card bg-base-100 w-96 shadow-md">
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes" />
</figure>
<div class="$$card-body">
<h2 class="$$card-title">
Card Title
<div class="$$badge $$badge-secondary">NEW</div>
</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions justify-end">
<div class="$$badge $$badge-outline">Fashion</div>
<div class="$$badge $$badge-outline">Products</div>
</div>
</div>
</div>
<div class="$$card bg-base-100 w-96 shadow-md">
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes" />
</figure>
<div class="$$card-body">
<h2 class="$$card-title">
Card Title
<div class="$$badge $$badge-secondary">NEW</div>
</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions justify-end">
<div class="$$badge $$badge-outline">Fashion</div>
<div class="$$badge $$badge-outline">Products</div>
</div>
</div>
</div>Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
<div class="$$card bg-base-100 w-96 shadow-md"> <div class="$$card-body"> <h2 class="$$card-title">Card Title</h2> <p>A card component has a figure, a body part, and inside body there are title and actions parts</p> </div> <figure> <img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" alt="Shoes" /> </figure> </div>
<div class="$$card bg-base-100 w-96 shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Card Title</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
</div>
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes" />
</figure>
</div>
<div class="$$card bg-base-100 w-96 shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Card Title</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
</div>
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes" />
</figure>
</div>
<div class="$$card bg-base-100 w-96 shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Card Title</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
</div>
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes" />
</figure>
</div>Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
<div class="$$card bg-base-100 w-96 shadow-md"> <figure class="px-10 pt-10"> <img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" alt="Shoes" class="rounded-xl" /> </figure> <div class="$$card-body items-center text-center"> <h2 class="$$card-title">Card Title</h2> <p>A card component has a figure, a body part, and inside body there are title and actions parts</p> <div class="$$card-actions"> <button class="$$btn $$btn-primary">Buy Now</button> </div> </div> </div>
<div class="$$card bg-base-100 w-96 shadow-md">
<figure class="px-10 pt-10">
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes"
class="rounded-xl" />
</figure>
<div class="$$card-body items-center text-center">
<h2 class="$$card-title">Card Title</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card bg-base-100 w-96 shadow-md">
<figure class="px-10 pt-10">
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes"
class="rounded-xl" />
</figure>
<div class="$$card-body items-center text-center">
<h2 class="$$card-title">Card Title</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card bg-base-100 w-96 shadow-md">
<figure class="px-10 pt-10">
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes"
class="rounded-xl" />
</figure>
<div class="$$card-body items-center text-center">
<h2 class="$$card-title">Card Title</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
<div class="$$card bg-base-100 image-full w-96 shadow-md"> <figure> <img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" alt="Shoes" /> </figure> <div class="$$card-body"> <h2 class="$$card-title">Card Title</h2> <p>A card component has a figure, a body part, and inside body there are title and actions parts</p> <div class="$$card-actions justify-end"> <button class="$$btn $$btn-primary">Buy Now</button> </div> </div> </div>
<div class="$$card bg-base-100 image-full w-96 shadow-md">
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes" />
</figure>
<div class="$$card-body">
<h2 class="$$card-title">Card Title</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card bg-base-100 image-full w-96 shadow-md">
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes" />
</figure>
<div class="$$card-body">
<h2 class="$$card-title">Card Title</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card bg-base-100 image-full w-96 shadow-md">
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
alt="Shoes" />
</figure>
<div class="$$card-body">
<h2 class="$$card-title">Card Title</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>Card title!
A card component has a figure, a body part, and inside body there are title and actions parts
<div class="$$card bg-base-100 w-96 shadow-md"> <div class="$$card-body"> <h2 class="$$card-title">Card title!</h2> <p>A card component has a figure, a body part, and inside body there are title and actions parts</p> <div class="$$card-actions justify-end"> <button class="$$btn $$btn-primary">Buy Now</button> </div> </div> </div>
<div class="$$card bg-base-100 w-96 shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Card title!</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card bg-base-100 w-96 shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Card title!</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="$$card bg-base-100 w-96 shadow-md">
<div class="$$card-body">
<h2 class="$$card-title">Card title!</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Buy Now</button>
</div>
</div>
</div>Card title!
A card component has a figure, a body part, and inside body there are title and actions parts
<div class="$$card bg-primary text-primary-content w-96"> <div class="$$card-body"> <h2 class="$$card-title">Card title!</h2> <p>A card component has a figure, a body part, and inside body there are title and actions parts</p> <div class="$$card-actions justify-end"> <button class="$$btn">Buy Now</button> </div> </div> </div>
<div class="$$card bg-primary text-primary-content w-96">
<div class="$$card-body">
<h2 class="$$card-title">Card title!</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions justify-end">
<button class="$$btn">Buy Now</button>
</div>
</div>
</div>
<div class="$$card bg-primary text-primary-content w-96">
<div class="$$card-body">
<h2 class="$$card-title">Card title!</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions justify-end">
<button class="$$btn">Buy Now</button>
</div>
</div>
</div>
<div class="$$card bg-primary text-primary-content w-96">
<div class="$$card-body">
<h2 class="$$card-title">Card title!</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="$$card-actions justify-end">
<button class="$$btn">Buy Now</button>
</div>
</div>
</div>Cookies!
We are using cookies for no reason.
<div class="$$card bg-neutral text-neutral-content w-96"> <div class="$$card-body items-center text-center"> <h2 class="$$card-title">Cookies!</h2> <p>We are using cookies for no reason.</p> <div class="$$card-actions justify-end"> <button class="$$btn $$btn-primary">Accept</button> <button class="$$btn $$btn-ghost">Deny</button> </div> </div> </div>
<div class="$$card bg-neutral text-neutral-content w-96">
<div class="$$card-body items-center text-center">
<h2 class="$$card-title">Cookies!</h2>
<p>We are using cookies for no reason.</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Accept</button>
<button class="$$btn $$btn-ghost">Deny</button>
</div>
</div>
</div>
<div class="$$card bg-neutral text-neutral-content w-96">
<div class="$$card-body items-center text-center">
<h2 class="$$card-title">Cookies!</h2>
<p>We are using cookies for no reason.</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Accept</button>
<button class="$$btn $$btn-ghost">Deny</button>
</div>
</div>
</div>
<div class="$$card bg-neutral text-neutral-content w-96">
<div class="$$card-body items-center text-center">
<h2 class="$$card-title">Cookies!</h2>
<p>We are using cookies for no reason.</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Accept</button>
<button class="$$btn $$btn-ghost">Deny</button>
</div>
</div>
</div>We are using cookies for no reason.
<div class="$$card bg-base-100 w-96 shadow-md"> <div class="$$card-body"> <div class="$$card-actions justify-end"> <button class="$$btn $$btn-square $$btn-sm"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> <p>We are using cookies for no reason.</p> </div> </div>
<div class="$$card bg-base-100 w-96 shadow-md">
<div class="$$card-body">
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-square $$btn-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<p>We are using cookies for no reason.</p>
</div>
</div>
<div class="$$card bg-base-100 w-96 shadow-md">
<div class="$$card-body">
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-square $$btn-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<p>We are using cookies for no reason.</p>
</div>
</div>
<div class="$$card bg-base-100 w-96 shadow-md">
<div class="$$card-body">
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-square $$btn-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<p>We are using cookies for no reason.</p>
</div>
</div>
New movie is released!
Click the button to watch on Jetflix app.
<div class="$$card $$card-side bg-base-100 shadow-md"> <figure> <img src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp" alt="Movie" /> </figure> <div class="$$card-body"> <h2 class="$$card-title">New movie is released!</h2> <p>Click the button to watch on Jetflix app.</p> <div class="$$card-actions justify-end"> <button class="$$btn $$btn-primary">Watch</button> </div> </div> </div>
<div class="$$card $$card-side bg-base-100 shadow-md">
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
alt="Movie" />
</figure>
<div class="$$card-body">
<h2 class="$$card-title">New movie is released!</h2>
<p>Click the button to watch on Jetflix app.</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Watch</button>
</div>
</div>
</div>
<div class="$$card $$card-side bg-base-100 shadow-md">
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
alt="Movie" />
</figure>
<div class="$$card-body">
<h2 class="$$card-title">New movie is released!</h2>
<p>Click the button to watch on Jetflix app.</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Watch</button>
</div>
</div>
</div>
<div class="$$card $$card-side bg-base-100 shadow-md">
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
alt="Movie" />
</figure>
<div class="$$card-body">
<h2 class="$$card-title">New movie is released!</h2>
<p>Click the button to watch on Jetflix app.</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Watch</button>
</div>
</div>
</div>
New album is released!
Click the button to listen on Spotiwhy app.
<div class="$$card lg:$$card-side bg-base-100 shadow-md"> <figure> <img src="https://img.daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.webp" alt="Album" /> </figure> <div class="$$card-body"> <h2 class="$$card-title">New album is released!</h2> <p>Click the button to listen on Spotiwhy app.</p> <div class="$$card-actions justify-end"> <button class="$$btn $$btn-primary">Listen</button> </div> </div> </div>
<div class="$$card lg:$$card-side bg-base-100 shadow-md">
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.webp"
alt="Album" />
</figure>
<div class="$$card-body">
<h2 class="$$card-title">New album is released!</h2>
<p>Click the button to listen on Spotiwhy app.</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Listen</button>
</div>
</div>
</div>
<div class="$$card lg:$$card-side bg-base-100 shadow-md">
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.webp"
alt="Album" />
</figure>
<div class="$$card-body">
<h2 class="$$card-title">New album is released!</h2>
<p>Click the button to listen on Spotiwhy app.</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Listen</button>
</div>
</div>
</div>
<div class="$$card lg:$$card-side bg-base-100 shadow-md">
<figure>
<img
src="https://img.daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.webp"
alt="Album" />
</figure>
<div class="$$card-body">
<h2 class="$$card-title">New album is released!</h2>
<p>Click the button to listen on Spotiwhy app.</p>
<div class="$$card-actions justify-end">
<button class="$$btn $$btn-primary">Listen</button>
</div>
</div>
</div>Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
