Card

Simple Card

Samsung X3S

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, aut tenetur. Obcaecati unde ipsum nihil sapiente quos! Doloribus, officia dignissimos!

Price

₹1000200000

Samsung X3S

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, aut tenetur. Obcaecati unde ipsum nihil sapiente quos! Doloribus, officia dignissimos!

Price

₹1000200000

Samsung X3S

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, aut tenetur. Obcaecati unde ipsum nihil sapiente quos! Doloribus, officia dignissimos!

Price

₹1000200000

<div class="card card-md">
    <div class="card-header">
        <img src="https://images.samsung.com/uk/smartphones/galaxy-s20/images/kv/galaxy-s20_highlights_kv_00.jpg"
                        alt="Samsung X3S" class="w-full"/>
    </div>
    <div class="card-bottom">
        <div class="card-body">
            <h1 class="card-title">Samsung X3S</h1>
            <p class="card-description">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, aut tenetur. Obcaecati
                unde
                ipsum nihil
                sapiente quos! Doloribus, officia dignissimos!
            </p>
        </div>
        <div class="card-footer">
            <div class="row items-center gap-05">
                <h4 class="o-70 font-semibold">Price</h4>
                <h4 class="text-md font-medium">₹1000200000</h4>
            </div>
            <div class="card-actions">
                <button class="btn btn-round-md btn-dark">
                    <i class="fa fa-shopping-cart"></i>
                </button>
                <button class=" btn-round-md btn bg-pink text-light">
                    <i class="fa fa-heart"></i>
                </button>
                <button class="btn btn-round-md  btn-primary">
                    <i class="fa fa-share"></i>
                </button>
            </div>
        </div>
    </div>
</div>

Simple Dismissable Card

×

Samsung X3S

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, aut tenetur. Obcaecati unde ipsum nihil sapiente quos! Doloribus, officia dignissimos!

Price

₹1000200000

<div class="card card-md">
    <div class="card-dismiss-btn btn btn-round-md btn-error">&times;</div>
    <div class="card-header">
        <img src="https://images.samsung.com/uk/smartphones/galaxy-s20/images/kv/galaxy-s20_highlights_kv_00.jpg"
            alt="Samsung X3S" class="w-full">
    </div>
    <div class="card-bottom">
        <div class="card-body">
            <h1 class="card-title">Samsung X3S</h1>
            <p class="card-description">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, aut tenetur. Obcaecati
                unde
                ipsum nihil
                sapiente quos! Doloribus, officia dignissimos!
            </p>
        </div>
        <div class="card-footer">
            <div class="row items-center gap-05">
                <h4 class="o-70 font-semibold">Price</h4>
                <h4 class="text-md font-medium">₹1000200000</h4>
            </div>
            <div class="card-actions">
                <button class="btn btn-round-md btn-dark">
                    <i class="fa fa-shopping-cart"></i>
                </button>
                <button class=" btn-round-md btn bg-pink text-light">
                    <i class="fa fa-heart"></i>
                </button>
                <button class="btn btn-round-md  btn-primary">
                    <i class="fa fa-share"></i>
                </button>
            </div>
        </div>
    </div>
</div>

Card with Badge

Trending

Iphone 13 Pro

iPhone 13 Pro takes a huge leap forward, bringing incredible speed to everything you do and dramatic new photo and video capabilities — all in two great sizes.

Price

₹102000

Most Rated

Iphone 13 Pro

iPhone 13 Pro takes a huge leap forward, bringing incredible speed to everything you do and dramatic new photo and video capabilities — all in two great sizes.

Price

₹102000

30% Off

Iphone 13 Pro

iPhone 13 Pro takes a huge leap forward, bringing incredible speed to everything you do and dramatic new photo and video capabilities — all in two great sizes.

Price

₹102000

<div class="card card-md">
    <div class="card-header">
        <div class="card-badge  bg-secondary">Most Rated</div>
        <img src="https://s.yimg.com/os/creatr-uploaded-images/2021-09/de2e6bc0-1a9b-11ec-bef7-5c6aa1cb549c"
            alt="Iphone 13S" />
    </div>
    <div class="card-bottom">
        <div class="card-body">
            <h1 class="card-title">Iphone 13 Pro</h1>
            <p class="card-description">
                iPhone 13 Pro takes a huge leap forward, bringing incredible speed to everything you do
                and
                dramatic new
                photo and video capabilities — all in two great sizes.
            </p>
        </div>
        <div class="card-footer">
            <div class="row items-center gap-05">
                <h4 class="o-70 font-semibold">Price</h4>
                <h4 class="text-md font-medium">₹102000</h4>
            </div>
            <div class="card-actions">
                <button class="btn btn-round-md btn-dark">
                    <i class="fa fa-shopping-cart"></i>
                </button>
                <button class=" btn-round-md btn bg-pink text-light">
                    <i class="fa fa-heart"></i>
                </button>
                <button class="btn btn-round-md  btn-primary">
                    <i class="fa fa-share"></i>
                </button>
            </div>
        </div>
    </div>
</div>

Responsive Horizontal Card

Most Rated

Poco F10

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, aut tenetur. Obcaecati unde ipsum nihil sapiente quos! Doloribus, officia dignissimos!

Price

₹1000200000

<div class="card card-horizontal">
    <div class="card-header">
        <div class="card-badge bg-tertiary">
            Most Rated</div>
        <img src="https://i01.appmifile.com/webfile/globalimg/dongxuechun/Lark20211119-195301.jpg?width=398&height=320"
            alt="Poco F10">
    </div>
    <div class="card-bottom">
        <div class="card-body">
            <h1 class="card-title">Poco F10</h1>
            <p class="card-description">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, aut tenetur.
                Obcaecati
                unde
                ipsum nihil
                sapiente quos! Doloribus, officia dignissimos!
            </p>
        </div>
        <div class="card-footer">
            <div class="row items-center gap-05">
                <h4 class="o-70 font-semibold">Price</h4>
                <h4 class="text-md font-medium">₹1000200000</h4>
            </div>
            <div class="card-actions">
                <button class="btn btn-round-md btn-dark">
                    <i class="fa fa-shopping-cart"></i>
                </button>
                <button class=" btn-round-md btn bg-pink text-light">
                    <i class="fa fa-heart"></i>
                </button>
                <button class="btn btn-round-md  btn-primary">
                    <i class="fa fa-share"></i>
                </button>
            </div>
        </div>
    </div>
</div>

Text Overlay Card

Best Selling

One Plus 10

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, aut tenetur. Obcaecati unde ipsum nihil sapiente quos! Doloribus, officia dignissimos!

Price

₹1000200000

Best Selling

<div class="card">
    <div class="card-header">
        <div class="card-text-overlay bg-dark-2 text-light text-2xl">
            Best Selling</div>
        <img src="https://oasis.opstatics.com/content/dam/oasis/page/2021/operation/1227/store/pc/01-Featured-2.jpg"
            alt="One Plus 10" class="h-40 w-full">
    </div>
    <div class="card-bottom">
        <div class="card-body">
            <h1 class="card-title">One Plus 10</h1>
            <p class="card-description">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, aut tenetur.
                Obcaecati
                unde
                ipsum nihil
                sapiente quos! Doloribus, officia dignissimos!
            </p>
        </div>
        <div class="card-footer">
            <div class="row items-center gap-05">
                <h4 class="o-70 font-semibold">Price</h4>
                <h4 class="text-md font-medium">₹1000200000</h4>
            </div>
            <div class="card-actions">
                <button class="btn btn-round-md btn-dark">
                    <i class="fa fa-shopping-cart"></i>
                </button>
                <button class=" btn-round-md btn bg-pink text-light">
                    <i class="fa fa-heart"></i>
                </button>
                <button class="btn btn-round-md  btn-primary">
                    <i class="fa fa-share"></i>
                </button>
            </div>
        </div>
    </div>
</div>

Text Only Card

<div class="card">
    <div class="card-body">
        <h1 class="card-title">
            Text Only Card
        </h1>
        <p class="card-description">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia repellat iusto
            explicabo omnis
            aliquam
            dignissimos aperiam consectetur aut quod in.
        </p>
    </div>
    <div class="card-footer">
        <div class="row items-center gap-05">
            <h4 class="o-70 font-semibold">Price</h4>
            <h4 class="text-md font-medium">₹1000200000</h4>
        </div>
        <div class="card-actions">
            <button class="btn btn-round-md btn-dark">
                <i class="fa fa-shopping-cart"></i>
            </button>
            <button class=" btn-round-md btn bg-pink text-light">
                <i class="fa fa-heart"></i>
            </button>
            <button class="btn btn-round-md  btn-primary">
                <i class="fa fa-share"></i>
            </button>
        </div>
    </div>
</div>