×

Cards

Card are used to show user related data collectively, like product details.

Examples

Vertical Card

New
Some Product

Some Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, possimus nostrum!

Rs.96.00Rs. 230.99 
                   
<div style="width: 380px" class="mr-3">
    <div class="shadow-md">
        <div class="badge-container">
            <span class="absolute font-bold card-badge badge bg-rose-500 text-white">New</span>
            <div class="p-5">
                <img class="img-responsive" src="https://picsum.photos/380/300" alt="" />
            </div>
            <button class="btn-close bg-rose-500"></button>
        </div>
        <div class="p-5">
            <span class="text-sm text-grey-500">Some Product</span>
            <h4 class="h4 font-normal text-lg subtitle1">
                <a href="">Some Title</a>
            </h4>
            <p class="body1 text-sm font-light mb-4">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero,
                possimus nostrum!
            </p>
            <hr class="mb-3" />
            <div class="flex justify-between">
                <div class="product-price">
                    <small class="line-through mr-2">Rs.96.00</small>Rs. 230.99
                </div>
                <div class="flex">
                    <a href=""><i class="fa fa-heart mr-3 text-grey-400 text-hover-cyan-500"></i></a>
                    <a href=""><i class="fa fa-shopping-cart text-grey-400 text-hover-cyan-500"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

Overlay Vertical Card

Out of Stock
Title

Price

price

Add to Cart 
                   
<div class="w-80">
    <div class="flex flex-col shadow-md rounded-md">
        <div class="overlay">
            <div class="badge-container img-container">
                <img class="rounded-md img-responsive" src="https://picsum.photos/350/250" alt=""
                    srcset="https://picsum.photos/350/250" />
                <span class="absolute font-bold card-badge badge bg-grey-500 text-white">Out of
                    Stock</span>
                <button class="btn-close bg-rose-500"></button>
            </div>
            <div class="flex flex-col p-5">
                <div class="flex justify-between align-items-center">
                    <h5 class="h5 font-semibold">Title</h5>
                    <i class="fas fa-heart text-grey-500 text-hover-rose-500"></i>
                </div>
                <div class="flex mt-3 mb-10">
                    <p class="subtitle1 line-through mr-3">Price</p>
                    <p class="subtitle1 text-rose-500">price</p>
                </div>

                <a class="btn btn-disabled bg-rose-600 bg-hover-rose-400 w-36 text-white"><span><i
                            class="btn-icon fas fa-shopping-cart"></i></span>Add to
                    Cart</a>
            </div>
        </div>
    </div>
</div>

Horizontal Card

New
Title

Price

price

Add to CartAdd to wishlist 
                   
<div style="height: 100%; width: 100%" class="flex shadow rounded-md">
    <div class="badge-container img-container">
        <img class="rounded-md img-responsive" src="https://picsum.photos/350/250" alt="" srcset="" />
        <span class="absolute card-badge badge bg-rose-500 text-white">New</span>
    </div>
    <div class="card-description p-6">
        <h5 class="h5 font-bold">Title</h5>
        <div class="flex mt-3 mb-28">
            <p class="subtitle1 line-through mr-3">Price</p>
            <p class="subtitle1 text-rose-500">price</p>
        </div>
        <div class="flex">
            <a href="#" class="btn bg-rose-600 bg-hover-rose-400 text-white mr-4"><span><i
                        class="btn-icon fas fa-shopping-cart"></i></span>Add to
                Cart</a><a href="#" class="btn btn-link-slate"><span><i
                        class="btn-icon fas fa-shopping-cart"></i></span>Add to
                wishlist</a>
        </div>
    </div>
</div>
Button Images