Cards


            @import url("/Pages/Card/card.css");
            <link rel="stylesheet" href="/Pages/Card/card.css">

Text only Card:

Example Title
This is an example text for this card. This card component is a very simple text only card that doesn't use any images, badges or avatars.

To use a text only card, use a div with class 'card'. Inside this dive use two other divs with class 'card-title' and 'card-text' for the title and text respectively.


            <div class="card">
                <div class="card-title"> Example Title </div>
                <div class="card-text"> This is an example text for this card. This card component is a very simple text only card
                    that doesn't use any images, badges or avatars.
                </div>
            </div>

Card with badges:

5
This is an example text for this card. This card component is an avatar card that has image, badge and button.

To use card with badges, the 'badge' class is needed. Put the card component inside the badge class.The 'card-img' tag can be used with an img tag to include a card image.The 'card-footer' class is used to include buttons at the bottom of the card.


            <div class="badge">
                <div class="badge-count">5
                <div class="card">
                    <img src="/Assets/AvatarImg1.jpg" class="card-img">
                    <div class="card-text"> This is an example text for this card. This card component is an avatar card
                        that has image, badge and button.
                    </div>
                    <div class="card-footer">
                        <button type="button" class="btn btn-primary"> Read More 
                        <button type="button" class="btn btn-secondary"> Bookmark 
                    </div>
                </div>
            </div>

eCommerce Card:

Earphones
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, doloremque!
Rs. 399/-

To use an eCommerce card, use a div with class 'card'. Inside this div use three other divs with class 'card-title', 'card-descr' and 'card-text' for the title ,description and text respectively.Add card-footer to add buttons.


            <div class="card">
                <img src="/Assets/earphones.jpg" class="card-img">
                <i class="fa-solid fa-heart card-icon">
                <div class="card-title">Earphones
                <div class="card-descr">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, doloremque!
                <div class="card-text"> Rs. 399/-
                </div>
                <div class="card-footer">
                    <button type="button" class="btn btn-primary"> Add to Cart 
                    <button type="button" class="btn btn-secondary"> Wishlist 
                </div>
            </div>

Responsive Horizontal Card:

Premium Hoodie

INR 4,900/-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis, repellendus.

To use responsive horizontal cards, use the class 'card-horizontal'. Inside this class put another div and use the class 'card-horizontal-box'. Put all your card content such as 'card-title', 'card-text' and image inside this div.


            <div class="card-horizontal">
                <div class="card-horizontal-box">
                    <div class="card-title">
                        <h2>Premium Hoodie</h2>
                         <h4>INR 4,900/- </h4>
                    </div>
                    <img src="/Assets/imgExample.jpg" alt="">
                    <div class="card-text">
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis, repellendus.
                        <a href="/"> Remove from Cart 
                        <a href="/"> Add to wishlist 
                    </div>
                </div>
            </div>