Card.
Make use of Tailwind's unique Card styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.
CardCard
Basic Card
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
<div class="card shadow-md! overflow-hidden" style="width: 18rem;">
<img src="assets/images/card/1.avif" class="card-img-top" alt="...">
<div class="p-7.5">
<h5 class="text-lg mb-2">Card title</h5>
<p class="mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="javascript:void(0);" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Kitchen Sink
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- An item
- A second item
- A third item
<div class="card shadow-md! overflow-hidden" style="width: 18rem;">
<img src="assets/images/card/2.avif" class="card-img-top" alt="...">
<div class="p-7.5">
<h5 class="text-lg mb-2">Card title</h5>
<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="flex flex-col divide-y divide-bordercolor">
<li class="block py-2.5 px-7.5">An item</li>
<li class="block py-2.5 px-7.5">A second item</li>
<li class="block py-2.5 px-7.5">A third item</li>
</ul>
<div class="p-7.5">
<a href="javascript:void(0);" class="card-link">Card link</a>
<a href="javascript:void(0);" class="card-link ms-7.5">Another link</a>
</div>
</div>
Background and color
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card shadow-none! text-white bg-primary! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor/40">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2 text-white">Primary card title</h5>
<p class="text-white">Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor/40 py-5 px-7.5 bg-transparent border-0 text-white text-2xs">Last updateed 3
min ago
</div>
</div>
<div class="card shadow-none! text-white bg-secondary! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor/40">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2 text-white">Secondary card title</h5>
<p class="text-white">Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor/40 py-5 px-7.5 bg-transparent border-0 text-white text-2xs">Last updateed 3
min ago
</div>
</div>
<div class="card shadow-none! text-white bg-success! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor/40">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2 text-white">Success card title</h5>
<p class="text-white">Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor/40 py-5 px-7.5 bg-transparent border-0 text-white text-2xs">Last updateed 3
min ago
</div>
</div>
<div class="card shadow-none! text-white bg-danger! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor/40">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2 text-white">Danger card title</h5>
<p class="text-white">Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor/40 py-5 px-7.5 bg-transparent border-0 text-white text-2xs">Last updateed 3
min ago
</div>
</div>
<div class="card shadow-none! text-white bg-warning! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor/40">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2 text-white">Warning card title</h5>
<p class="text-white">Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor/40 py-5 px-7.5 bg-transparent border-0 text-white text-2xs">Last updateed 3
min ago
</div>
</div>
<div class="card shadow-none! text-white bg-info! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor/40">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2 text-white">Info card title</h5>
<p class="text-white">Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor/40 py-5 px-7.5 bg-transparent border-0 text-white text-2xs">Last updateed 3
min ago
</div>
</div>
<div class="card shadow-none! bg-light! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2">Light card title</h5>
<p>Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor py-5 px-7.5 bg-transparent border-0 text-2xs">Last updateed 3
min ago
</div>
</div>
<div class="card shadow-none! text-white bg-dark! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor/40">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2 text-white">Dark card title</h5>
<p class="text-white">Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor/40 py-5 px-7.5 bg-transparent border-0 text-white text-2xs">Last updateed 3
min ago
</div>
</div>
Border
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card shadow-md! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2">Primary card title</h5>
<p class=" text-primary">Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor py-5 px-7.5 bg-transparent border-0 text-2xs">Last updateed 3
min ago
</div>
</div>
<div class="card shadow-md! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2">Secondary card title</h5>
<p class=" text-secondary">Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor py-5 px-7.5 bg-transparent border-0 text-2xs">Last updateed 3
min ago
</div>
</div>
<div class="card shadow-md! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2">Success card title</h5>
<p class=" text-success">Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor py-5 px-7.5 bg-transparent border-0 text-2xs">Last updateed 3
min ago
</div>
</div>
<div class="card shadow-md! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2">Danger card title</h5>
<p class=" text-danger">Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor py-5 px-7.5 bg-transparent border-0 text-2xs">Last updateed 3
min ago
</div>
</div>
<div class="card shadow-md! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2">Warning card title</h5>
<p class=" text-warning">Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor py-5 px-7.5 bg-transparent border-0 text-2xs">Last updateed 3
min ago
</div>
</div>
<div class="card shadow-md! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2">Info card title</h5>
<p class=" text-info">Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor py-5 px-7.5 bg-transparent border-0 text-2xs">Last updateed 3
min ago
</div>
</div>
<div class="card shadow-md! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2">Light card title</h5>
<p>Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor py-5 px-7.5 bg-transparent border-0 text-2xs">Last updateed 3
min ago
</div>
</div>
<div class="card shadow-md! max-w-72">
<div class="relative py-6 px-7.5 border-b border-bordercolor">Header</div>
<div class="p-7.5">
<h5 class="text-xl mb-2">Dark card title</h5>
<p class=" text-dark">Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
</div>
<div class="border-t border-bordercolor py-5 px-7.5 bg-transparent border-0 text-2xs">Last updateed 3
min ago
</div>
</div>
Image caps
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<div class="card shadow-md! overflow-hidden max-w-175">
<img class="w-full" src="assets/images/card/1.avif" alt="Card image cap">
<div class="p-7.5">
<h5 class="text-lg mb-2">Card title</h5>
<p class="mb-4">This is a wider card with supporting text below as
a natural lead-in to additional content. This content is a little
bit longer.</p>
<p class="text-xs">Last updated 3 mins ago</p>
</div>
</div>
<div class="card shadow-md! overflow-hidden max-w-175">
<div class="p-7.5">
<h5 class="text-lg mb-2">Card title</h5>
<p class="mb-4">This is a wider card with supporting text below as
a natural lead-in to additional content. This content is a little
bit longer.</p>
<p class="text-xs">Last updated 3 mins ago</p>
</div>
<img class="w-full" src="assets/images/card/2.avif" alt="Card image cap">
</div>
Image overlays
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<div class="card overflow-hidden max-w-175">
<img src="assets/images/card/3.avif" class="card-img" alt="...">
<div class="absolute inset-0 p-4 rounded-xl bg-black/50">
<h5 class="text-xl mb-2 text-white">Card title</h5>
<p class="mb-4 text-white">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="text-xs text-white"><small>Last updated 3 mins ago</small></p>
</div>
</div>
Horizontal
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<div class="card shadow-md! overflow-hidden max-w-175">
<div class="row [--gutter-x:0]!">
<div class="w-1/3">
<img class="size-full object-cover" src="assets/images/card/1.avif" alt="Card image cap">
</div>
<div class="w-2/3">
<div class="p-7.5">
<h5 class="text-lg mb-2">Card title</h5>
<p class="mb-4">This is a wider card with supporting text below as
a natural lead-in to additional content. This content is a little
bit longer.</p>
<p class="text-xs">Last updated 3 mins ago</p>
</div>
</div>
</div>
</div>
Card groups
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<div class="flex flex-wrap rounded-xl overflow-hidden">
<div class="card flex-1 h-auto! rounded-e-none!">
<img src="assets/images/card/1.avif" class="card-img-top" alt="...">
<div class="p-7.5">
<h5 class="text-lg mb-2">Card title</h5>
<p class="mb-4">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="text-xs">Last updated 3 mins ago</p>
</div>
</div>
<div class="card flex-1 h-auto! rounded-none!">
<img src="assets/images/card/2.avif" class="card-img-top" alt="...">
<div class="p-7.5">
<h5 class="text-lg mb-2">Card title</h5>
<p class="mb-4">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="text-xs">Last updated 3 mins ago</p>
</div>
</div>
<div class="card flex-1 h-auto! rounded-s-none!">
<img src="assets/images/card/3.avif" class="card-img-top" alt="...">
<div class="p-7.5">
<h5 class="text-lg mb-2">Card title</h5>
<p class="mb-4">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="text-xs">Last updated 3 mins ago</p>
</div>
</div>
</div>