Simple card
Use the following simple card component with a title and description.
<div class="card">
<h4 class="mb-4 font-bold leading-none text-heading">Card title</h4>
<p class="mb-5">
Nulla mollit reprehenderit ex incididunt exercitation adipisicing proident culpa cupidatat. Ipsum fugiat sit tempor veniam. Ex
reprehenderit id irure adipisicing et in. Laborum commodo incididunt laborum qui non ipsum amet fugiat est occaecat. Consectetur
labore enim magna aliquip adipisicing proident pariatur sint do mollit aliquip ipsum commodo excepteur.
</p>
<button type="button" class="btn bg-blue-600/90 text-md text-white hover:bg-blue-600">Button</button>
</div>
Card with image
You can use the following example of a card element with an image for blog posts, user cards, and many more.
<div class="card">
<div class="m-0.5">
<img src="../assets/img/gallery/1.jpg" class="h-40 w-full rounded object-cover lg:h-60" alt="" />
</div>
<div class="p-5">
<h4 class="mb-4 font-bold leading-none text-heading">Card title</h4>
<p class="mb-5">
Nulla mollit reprehenderit ex incididunt exercitation adipisicing proident culpa cupidatat. Ipsum fugiat sit tempor veniam.
Ex reprehenderit id irure adipisicing et in. Laborum commodo incididunt laborum qui non ipsum amet fugiat est occaecat.
Consectetur labore enim magna aliquip adipisicing proident pariatur sint do mollit aliquip ipsum commodo excepteur.
</p>
<button type="button" class="btn bg-blue-600/90 text-md text-white hover:bg-blue-600">Button</button>
</div>
</div>
Header and footer
Add optional header and footer sections to the card.
<div class="card">
<div class="flex items-center border-b border-light-100 py-2.5 px-5 text-muted dark:border-dark-200">
Featured post
<i class="icon ml-auto text-2xl">more_horiz</i>
</div>
<div class="p-5">
<h4 class="mb-4 font-bold leading-none text-heading">Card title</h4>
<p class="mb-5">
Nulla mollit reprehenderit ex incididunt exercitation adipisicing proident culpa cupidatat. Ipsum fugiat sit tempor veniam.
Ex reprehenderit id irure adipisicing et in. Laborum commodo incididunt laborum qui non ipsum amet fugiat est occaecat.
Consectetur labore enim magna aliquip adipisicing proident pariatur sint do mollit aliquip ipsum commodo excepteur.
</p>
<button type="button" class="btn bg-blue-600/90 text-md text-white hover:bg-blue-600">Button</button>
</div>
<div class="border-t border-light-100 py-3 px-5 text-muted dark:border-dark-200">2 days ago</div>
</div>
Horizontal
Use card which has its child elements aligned horizontally.
<div class="card sm:flex">
<div class="flex-shrink-0 p-0.5">
<img src="../assets/img/gallery/1.jpg" class="h-full rounded object-cover sm:w-40" alt="" />
</div>
<div class="p-5">
<h4 class="mb-4 font-bold leading-none text-heading">Card title</h4>
<p class="mb-5">
Nulla mollit reprehenderit ex incididunt exercitation adipisicing proident culpa cupidatat. Ipsum fugiat sit tempor veniam.
Ex reprehenderit id irure adipisicing et in. Laborum commodo incididunt laborum qui non ipsum amet fugiat est occaecat.
Consectetur labore enim magna aliquip adipisicing proident pariatur sint do mollit aliquip ipsum commodo excepteur.
</p>
<button type="button" class="btn bg-blue-600/90 text-md text-white hover:bg-blue-600">Button</button>
</div>
</div>