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
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.
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.
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.
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.
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>
'/%3e%3cpath%20d='M19.3718%208.44531C13.2794%208.77342%208.42255%2013.8273%208.42255%2020.0001V34.643C8.42255%2036.336%207.05011%2037.7085%205.35714%2037.7085C3.66416%2037.7085%202.29171%2036.336%202.29171%2034.643V22.0124C5.86298%2012.0352%2013.2293%208.65628%2019.3718%208.44531Z'%20fill='url(%23paint1_linear_1134_24406)'/%3e%3cpath%20d='M24.111%2018.6378L20.8502%2019.8353L19.6368%2023.0902L18.4392%2019.8294L15.1843%2018.616L18.4451%2017.4184L19.6586%2014.1636L20.8561%2017.4243L24.111%2018.6378Z'%20fill='url(%23paint2_linear_1134_24406)'/%3e%3cpath%20d='M26.0749%2014.0398L24.7502%2014.5263L24.2573%2015.8486L23.7708%2014.5239L22.4485%2014.0309L23.7732%2013.5444L24.2661%2012.2221L24.7526%2013.5468L26.0749%2014.0398Z'%20fill='url(%23paint3_linear_1134_24406)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_1134_24406'%20x1='21.5672'%20y1='33.2429'%20x2='17.6287'%20y2='7.94212'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_1134_24406'%20x1='5.99286'%20y1='14.1017'%20x2='11.3239'%20y2='34.0911'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_1134_24406'%20x1='16.5589'%20y1='17.1615'%20x2='24.3278'%20y2='18.3903'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_1134_24406'%20x1='16.5589'%20y1='17.1615'%20x2='24.3278'%20y2='18.3903'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
