With Subtitle
Show Code
Card Title
Card Sub Title
Lush green terraces cascade along misty hills, creating a peaceful place landscape
Copy
<div class="p-5 border border-border-color rounded-lg">
<div class="mb-4">
<h5 class="mb-1">Card Title</h5>
<p>Card Sub Title</p>
</div>
<div class="mb-4">
<img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
</div>
<p>Lush green terraces cascade along misty hills, creating a peaceful place landscape</p>
</div>
With Button
Show Code
Card Title
Lush green terraces cascade along misty hills
Add to cart
Copy
<div class="p-5 border border-border-color rounded-lg">
<div class="mb-4">
<h5>Card Title</h5>
</div>
<div class="mb-4">
<img class="rounded-lg" src="assets/img/card/card-02.jpg" alt="card">
</div>
<p class="mb-4">Lush green terraces cascade along misty hills</p>
<a href="#" class="btn-sm flex items-center justify-center gap-1.5 cursor-pointer inline-flex bg-light border border-border-color text-dark text-center hover:bg-light-900 hover:text-dark">
<i class="icon icon-shopping-bag"></i>
Add to cart
</a>
</div>
With Links
Show Code
Card Title
Lush green terraces cascade along misty hills
View More
Copy
<div class="p-5 border border-border-color rounded-lg">
<div class="mb-4">
<h5>Card Title</h5>
</div>
<div class="mb-4">
<img class="rounded-lg" src="assets/img/card/card-03.jpg" alt="card">
</div>
<p class="mb-4">Lush green terraces cascade along misty hills</p>
<a href="#" class="inline-flex text-info underline text-center hover:bg-light-900 hover:text-dark">
View More
</a>
</div>
Horizontal Right Align Content
Show Code
Card Title
Card Sub Title
Lush green terraces cascade along misty hills
Updated 2 days ago
Copy
<div class="p-5 border border-border-color rounded-lg md:flex block gap-4">
<div class="md:max-w-[180px]">
<img class="size-full rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
</div>
<div>
<h5 class="mb-1">Card Title</h5>
<p class="mb-4">Card Sub Title</p>
<p class="mb-4">Lush green terraces cascade along misty hills</p>
<p>Updated 2 days ago</p>
</div>
</div>
Horizontal Left Align Content
Show Code
Card Title
Card Sub Title
Lush green terraces cascade along misty hills
Updated 2 days ago
Copy
<div class="p-5 border border-border-color rounded-lg md:flex block md:justify-between gap-4">
<div>
<h5 class="mb-1">Card Title</h5>
<p class="mb-4">Card Sub Title</p>
<p class="mb-4">Lush green terraces cascade along misty hills</p>
<p>Updated 2 days ago</p>
</div>
<div class="md:max-w-[180px]">
<img class="size-full rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
</div>
</div>
Left Align
Show Code
Card Title
Lush green terraces cascade along misty hills
Copy
<div class="p-5 border border-border-color rounded-lg">
<div class="mb-4">
<h5 class="mb-1">Card Title</h5>
</div>
<div class="mb-4">
<img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
</div>
<p>Lush green terraces cascade along misty hills</p>
</div>
Centre Align
Show Code
Card Title
Lush green terraces cascade along misty hills
Copy
<div class="p-5 border border-border-color rounded-lg">
<div class="mb-4 text-center">
<h5>Card Title</h5>
</div>
<div class="mb-4 flex justify-center items-center">
<img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
</div>
<p class="text-center">Lush green terraces cascade along misty hills</p>
</div>
Right Align
Show Code
Card Title
Lush green terraces cascade along misty hills
Copy
<div class="p-5 border border-border-color rounded-lg">
<div class="mb-4 text-end">
<h5>Card Title</h5>
</div>
<div class="mb-4 flex justify-end items-end">
<img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
</div>
<p class="text-end">Lush green terraces cascade along misty hills</p>
</div>
Horizontal Right Align Content
Show Code
Card Title
Card Sub Title
Lush green terraces cascade along misty hills
Updated 2 days ago
Copy
<div class="border border-border-color rounded-lg md:flex block gap-4 overflow-hidden">
<div class="md:max-w-[180px]">
<img class="size-full" src="assets/img/card/card-01.jpg" alt="card">
</div>
<div class="p-5">
<h5 class="mb-1">Card Title</h5>
<p class="mb-4">Card Sub Title</p>
<p class="mb-4">Lush green terraces cascade along misty hills</p>
<p>Updated 2 days ago</p>
</div>
</div>
Horizontal Left Align Content
Show Code
Card Title
Card Sub Title
Lush green terraces cascade along misty hills
Updated 2 days ago
Copy
<div class="border border-border-color rounded-lg md:flex block md:justify-between gap-4 overflow-hidden">
<div class="p-5">
<h5 class="mb-1">Card Title</h5>
<p class="mb-4">Card Sub Title</p>
<p class="mb-4">Lush green terraces cascade along misty hills</p>
<p>Updated 2 days ago</p>
</div>
<div class="md:max-w-[180px]">
<img class="size-full" src="assets/img/card/card-01.jpg" alt="card">
</div>
</div>
With Header
Show Code
Card Title
Lush green terraces cascade along misty hills, forming gentle layers that follow the curves of the land and create a calm and quite place.
Copy
<div class="border border-border-color rounded-lg overflow-hidden">
<div class="px-5 py-4 bg-light border-b border-border-color">
<h5>Card Title</h5>
</div>
<div class="p-5">
<p>Lush green terraces cascade along misty hills, forming gentle layers that follow the curves of the land and create a calm and quite place.</p>
</div>
</div>
With Footer
Show Code
Lush green terraces cascade along misty hills, forming gentle layers that follow the curves of the land and create a calm and quite place.
Card Title
Copy
<div class="border border-border-color rounded-lg overflow-hidden">
<div class="p-5">
<p>Lush green terraces cascade along misty hills, forming gentle layers that follow the curves of the land and create a calm and quite place.</p>
</div>
<div class="px-5 py-4 bg-light border-t border-border-color">
<h5>Card Title</h5>
</div>
</div>
Header & Footer
Show Code
Card Title
Lush green terraces cascade along misty hills.
Card Title
Copy
<div class="border border-border-color rounded-lg overflow-hidden">
<div class="px-5 py-4 bg-light border-b border-border-color">
<h5>Card Title</h5>
</div>
<div class="p-5">
<p>Lush green terraces cascade along misty hills.</p>
</div>
<div class="px-5 py-4 bg-light border-t border-border-color">
<h5>Card Title</h5>
</div>
</div>
Primary Color
Show Code
Lush green terraces cascade along misty hills, creating a peaceful Place.
View More
Copy
<div class="p-5 bg-primary border border-border-color rounded-lg overflow-hidden">
<p class="mb-4 text-white">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
<a href="#" class="underline text-white">View More</a>
</div>
Light Color
Show Code
Lush green terraces cascade along misty hills, creating a peaceful Place.
View More
Copy
<div class="p-5 bg-light border border-border-color rounded-lg overflow-hidden">
<p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
<a href="#" class="underline text-dark">View More</a>
</div>
Dark Color
Show Code
Lush green terraces cascade along misty hills, creating a peaceful Place.
View More
Copy
<div class="p-5 bg-dark border border-border-color rounded-lg overflow-hidden">
<p class="mb-4 text-white">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
<a href="#" class="underline text-white">View More</a>
</div>
Border
Show Code
Lush green terraces cascade along misty hills, creating a peaceful Place.
View More
Copy
<div class="p-5 bg-light border border-border-color rounded-lg overflow-hidden">
<p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
<a href="#" class="underline text-dark">View More</a>
</div>
Dotted Border
Show Code
Lush green terraces cascade along misty hills, creating a peaceful Place.
View More
Copy
<div class="p-5 border border-dashed border-border-color rounded-lg overflow-hidden">
<p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
<a href="#" class="underline text-dark">View More</a>
</div>
Color Border
Show Code
Lush green terraces cascade along misty hills, creating a peaceful Place.
View More
Copy
<div class="p-5 border border-primary rounded-lg overflow-hidden">
<p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
<a href="#" class="underline text-dark">View More</a>
</div>
Left Border
Show Code
Lush green terraces cascade along misty hills, creating a peaceful Place.
Add to cart
Copy
<div class="p-5 border border-border-color border-s-3 border-s-primary rounded-lg overflow-hidden">
<p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
<button type="button" class="btn-sm flex items-center justify-center gap-1.5 cursor-pointer bg-white border border-border-color text-dark text-center hover:bg-light-900 hover:text-dark">
<i class="icon icon-shopping-bag"></i> Add to cart
</button>
</div>
Right Border
Show Code
Lush green terraces cascade along misty hills, creating a peaceful Place.
Add to cart
Copy
<div class="p-5 border border-border-color border-e-3 border-e-primary rounded-lg overflow-hidden">
<p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
<button type="button" class="btn-sm flex items-center justify-center gap-1.5 cursor-pointer bg-white border border-border-color text-dark text-center hover:bg-light-900 hover:text-dark">
<i class="icon icon-shopping-bag"></i> Add to cart
</button>
</div>
Bottom Border
Show Code
Lush green terraces cascade along misty hills, creating a peaceful Place.
Add to cart
Copy
<div class="p-5 border border-border-color border-b-3 border-b-primary rounded-lg overflow-hidden">
<p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
<button type="button" class="btn-sm flex items-center justify-center gap-1.5 cursor-pointer bg-white border border-border-color text-dark text-center hover:bg-light-900 hover:text-dark">
<i class="icon icon-shopping-bag"></i> Add to cart
</button>
</div>
Top Border
Show Code
Lush green terraces cascade along misty hills, creating a peaceful Place.
Add to cart
Copy
<div class="p-5 border border-border-color border-t-3 border-t-primary rounded-lg overflow-hidden">
<p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
<button type="button" class="btn-sm flex items-center justify-center gap-1.5 cursor-pointer bg-white border border-border-color text-dark text-center hover:bg-light-900 hover:text-dark">
<i class="icon icon-shopping-bag"></i> Add to cart
</button>
</div>
Glassmorphism
Show Code
Lush green terraces cascade along misty hills, creating a peaceful place
Copy
<div class="rounded-lg relative overflow-hidden">
<img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
<div class="absolute bottom-0 px-5 py-4 w-full backdrop-blur-[10px]">
<p class="text-white">Lush green terraces cascade along misty hills, creating a peaceful place</p>
</div>
</div>
Tabs
Show Code
Card Title
Lush green terraces cascade along misty hills, forming gentle layers that follow the curves of the land and create a calm and quite place.
Copy
<div class="border border-border-color rounded-lg overflow-hidden">
<div class="flex items-center gap-2 px-5 py-4 bg-light border-b border-border-color">
<a href="#" class="text-primary font-medium">Active</a>
<a href="#" class="text-dark font-medium">Link</a>
<a href="#" class="font-medium">Disabled</a>
</div>
<div class="p-5">
<p class="text-dark font-semibold mb-1">Card Title</p>
<p class="text-[13px]">Lush green terraces cascade along misty hills, forming gentle layers that follow the curves of the land and create a calm and quite place.</p>
</div>
</div>
Image Overlay
Show Code
Lush green terraces cascade along misty hills, creating a peaceful place
Copy
<div class="rounded-lg relative">
<img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
<div class="absolute bottom-0 px-5 py-4 w-full">
<p class="text-white">Lush green terraces cascade along misty hills, creating a peaceful place</p>
</div>
</div>
Card Group with Image
Show Code
Card Title
Card Sub Title
Lush green terraces cascade along misty hills, creating a peaceful place landscape
Card Title
Card Sub Title
Lush green terraces cascade along misty hills, creating a peaceful place landscape
Card Title
Card Sub Title
Lush green terraces cascade along misty hills, creating a peaceful place landscape
Copy
<div class="md:flex items-center block">
<div class="p-5 border border-border-color first:rounded-s-lg last:rounded-e-lg rounded-none">
<div class="mb-4">
<h5 class="mb-1">Card Title</h5>
<p>Card Sub Title</p>
</div>
<div class="mb-4">
<img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
</div>
<p>Lush green terraces cascade along misty hills, creating a peaceful place landscape</p>
</div>
<div class="p-5 border border-border-color first:rounded-s-lg last:rounded-e-lg rounded-none">
<div class="mb-4">
<h5 class="mb-1">Card Title</h5>
<p>Card Sub Title</p>
</div>
<div class="mb-4">
<img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
</div>
<p>Lush green terraces cascade along misty hills, creating a peaceful place landscape</p>
</div>
<div class="p-5 border border-border-color first:rounded-s-lg last:rounded-e-lg rounded-none">
<div class="mb-4">
<h5 class="mb-1">Card Title</h5>
<p>Card Sub Title</p>
</div>
<div class="mb-4">
<img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
</div>
<p>Lush green terraces cascade along misty hills, creating a peaceful place landscape</p>
</div>
</div>
Card Group without Image
Show Code
Card Title
Lush green terraces cascade along misty hills, creating a peaceful Place.
View More
Card Title
Lush green terraces cascade along misty hills, creating a peaceful Place.
View More
Card Title
Lush green terraces cascade along misty hills, creating a peaceful Place.
View More
Copy
<div class="md:flex items-center block">
<div class="p-5 bg-white border border-border-color first:rounded-s-lg last:rounded-e-lg rounded-none overflow-hidden">
<h5 class="mb-1">Card Title</h5>
<p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
<a href="#" class="underline text-info">View More</a>
</div>
<div class="p-5 bg-white border border-border-color first:rounded-s-lg last:rounded-e-lg rounded-none overflow-hidden">
<h5 class="mb-1">Card Title</h5>
<p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
<a href="#" class="underline text-info">View More</a>
</div>
<div class="p-5 bg-white border border-border-color first:rounded-s-lg last:rounded-e-lg rounded-none overflow-hidden">
<h5 class="mb-1">Card Title</h5>
<p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
<a href="#" class="underline text-info">View More</a>
</div>
</div>
Streched Link
Show Code
Card Title
Lush green terraces cascade along misty hills, creating a peaceful place landscape
Lush green terraces cascade along misty hills, creating a peaceful place landscape
Go Somewhere
Lush green terraces cascade along misty hills, creating a peaceful place landscape
View More
Copy
<div class="md:flex block gap-6">
<div class="border border-border-color rounded-lg overflow-hidden">
<img src="assets/img/card/card-01.jpg" alt="card">
<div class="p-5">
<h5 class="mb-1">Card Title</h5>
<p> Lush green terraces cascade along misty hills, creating a peaceful place landscape </p>
</div>
</div>
<div class="border border-border-color rounded-lg overflow-hidden">
<img src="assets/img/card/card-01.jpg" alt="card">
<div class="p-5">
<p class="mb-2.5">Lush green terraces cascade along misty hills, creating a peaceful place landscape</p>
<button type="button" class="btn-sm flex items-center justify-center gap-1.5 cursor-pointer bg-light font-semibold border border-border-color text-dark text-center hover:bg-light-900 hover:text-dark" > Go Somewhere <i class="icon icon-chevron-right"></i> </button>
</div>
</div>
<div class="border border-border-color rounded-lg overflow-hidden">
<img src="assets/img/card/card-01.jpg" alt="card">
<div class="p-5">
<p class="mb-2.5"> Lush green terraces cascade along misty hills, creating a peaceful place landscape </p>
<a href="#" class="underline text-info">View More</a>
</div>
</div>
</div>