Cards

Flexible content containers with multiple variants and options.

With Subtitle

Card Title

Card Sub Title

Lush green terraces cascade along misty hills, creating a peaceful place landscape

	

	
            <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/avatar/avatar-10.jpg" alt="card">
                </div> 
                <p>Lush green terraces cascade along misty hills, creating a peaceful place landscape</p>
            </div>

With Button

Card Title

Lush green terraces cascade along misty hills

Add to cart

	

	
            <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/avatar/avatar-11.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-shopping-bag"></i>
                    Add to cart
                </a>
            </div>

With Links

Card Title

Lush green terraces cascade along misty hills

	

	
            <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/avatar/avatar-12.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

Card Title

Card Sub Title

Lush green terraces cascade along misty hills

Updated 2 days ago

	

	
            <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/avatar/avatar-10.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

Card Title

Card Sub Title

Lush green terraces cascade along misty hills

Updated 2 days ago

	

	
            <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/avatar/avatar-10.jpg" alt="card">
                </div>
            </div>

Left Align

Card Title

Lush green terraces cascade along misty hills

	

	
            <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/avatar/avatar-10.jpg" alt="card">
                </div> 
                <p>Lush green terraces cascade along misty hills</p>
            </div>

Centre Align

Card Title

Lush green terraces cascade along misty hills

	

	
            <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/avatar/avatar-10.jpg" alt="card">
                </div> 
                <p class="text-center">Lush green terraces cascade along misty hills</p>
            </div>

Right Align

Card Title

Lush green terraces cascade along misty hills

	

	
            <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/avatar/avatar-10.jpg" alt="card">
                </div> 
                <p class="text-end">Lush green terraces cascade along misty hills</p>
            </div>

Horizontal Right Align Content

Card Title

Card Sub Title

Lush green terraces cascade along misty hills

Updated 2 days ago

	

	
            <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/avatar/avatar-10.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

Card Title

Card Sub Title

Lush green terraces cascade along misty hills

Updated 2 days ago

	

	
            <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/avatar/avatar-10.jpg" alt="card">
                </div>
            </div>

With Header

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.

	

	
            <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

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

	

	
            <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

Card Title

Lush green terraces cascade along misty hills.

Card Title

	

	
            <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

Lush green terraces cascade along misty hills, creating a peaceful Place.

	

	
            <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

Lush green terraces cascade along misty hills, creating a peaceful Place.

	

	
            <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

Lush green terraces cascade along misty hills, creating a peaceful Place.

	

	
            <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

Lush green terraces cascade along misty hills, creating a peaceful Place.

	

	
            <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

Lush green terraces cascade along misty hills, creating a peaceful Place.

	

	
            <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

Lush green terraces cascade along misty hills, creating a peaceful Place.

	

	
            <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

Lush green terraces cascade along misty hills, creating a peaceful Place.

	

	
            <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-shopping-bag"></i> Add to cart
                </button>
            </div>

Right Border

Lush green terraces cascade along misty hills, creating a peaceful Place.

	

	
            <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-shopping-bag"></i> Add to cart
                </button>
            </div>

Bottom Border

Lush green terraces cascade along misty hills, creating a peaceful Place.

	

	
            <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-shopping-bag"></i> Add to cart
                </button>
            </div>

Top Border

Lush green terraces cascade along misty hills, creating a peaceful Place.

	

	
            <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-shopping-bag"></i> Add to cart
                </button>
            </div>

Glassmorphism

Lush green terraces cascade along misty hills, creating a peaceful place

	

	
            <div class="rounded-lg relative overflow-hidden">
                <img class="rounded-lg" src="assets/img/avatar/avatar-10.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

Active Link Disabled

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.

	

	
            <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

Lush green terraces cascade along misty hills, creating a peaceful place

	

	
            <div class="rounded-lg relative">
                <img class="rounded-lg" src="assets/img/avatar/avatar-10.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

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

	

	
            <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/avatar/avatar-10.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/avatar/avatar-10.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/avatar/avatar-10.jpg" alt="card">
                </div> 
                    <p>Lush green terraces cascade along misty hills, creating a peaceful place landscape</p>
                </div>  
            </div>

Card Group without Image

Card Title

Lush green terraces cascade along misty hills, creating a peaceful Place.

Card Title

Lush green terraces cascade along misty hills, creating a peaceful Place.

Card Title

Lush green terraces cascade along misty hills, creating a peaceful Place.

	

	
            <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

Card Title

Lush green terraces cascade along misty hills, creating a peaceful place landscape

	

	
            <div class="md:flex block gap-6">
                <div class="border border-border-color rounded-lg overflow-hidden">
                    <img src="assets/img/avatar/avatar-10.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/avatar/avatar-10.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-chevron-right"></i> </button>
                    </div>
                </div>
                <div class="border border-border-color rounded-lg overflow-hidden">
                    <img src="assets/img/avatar/avatar-10.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>