Components

Card

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. for example product display on an ecommerce website is generally a card component. Below are few variations of card component:

1. Text only card

2. Card with shadow

3. Vertical card

4. Horizontal card

5. Card with text overlay

6. Card for ecommerce website

7. Card with dismiss

8. Card with badge

1. Text only card:

Card Title

Card Subtitle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quae dolor ut reprehenderit, non ipsam. Facere tempore nulla doloribus minima. Animi qui aliquam vero esse laudantium! Saepe porro dicta natus quod optio magni eaque vel commodi sapiente ipsum error dolore animi recusandae, quo expedita obcaecati.

            
                <div class="card-container">
                    <h2>Card Title<h2>
                    <h3>Card Subtitle</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorib</p>
                </div>

2. Card With Shadow:

Card Title

Card Subtitle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quae dolor ut reprehenderit, non ipsam. Facere tempore nulla doloribus minima. Animi qui aliquam vero esse laudantium! Saepe porro dicta natus quod optio magni eaque vel commodi sapiente ipsum error dolore animi recusandae, quo expedita obcaecati.

            
                <div class="card-container card-with-shadow">
                    <h2>Card Title</h2>
                    <h3>Card Subtitle</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribu</p>
                </div>

3. Vertical Card:

Woodland Shoes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quae dolor ut reprehenderit

₹ 4999

Add To Cart Buy Now 
            
                <div class="card-container">
                    <img src="/pics/product/woodland shoe.jpg">
                    <div>
                        <h2>Woodland Shoes</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quae dolor ut reprehenderit</p>
                        <h2>₹ 4999</h2>
                    </div>
                    <div class="cta">
                        <a href="#" class="button-contained add-to-cart-button"><i class="fa-solid fa-cart-arrow-down"></i>Add To Cart</a>
                        <a href="#"class="button-contained delete-button"></i>Buy Now</a>
                    </div>
                </div>

4. Horizontal Card:

Woodland Shoes

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis, autem ut! Ab, optio laboriosam dicta quos impedit magnam nemo facere eligendi iste, velit ipsam, obcaecati similique modi id! Quo modi ullam neque aut similique quos perferendis assumenda ut, reprehenderit doloremque dolorum, at numquam minima sed?

₹ 4999

Add To Cart Buy Now 
            
                <div class="horizontal-card">
                    <img src="/pics/product/woodland shoe.jpg">
                    <div class="horizontal-card-text">
                        <h2>Woodland Shoes</h2>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis, au</p>
                        <h2>₹ 4999</h2>
                        <div class="cta">
                            <a href="#" class="button-contained add-to-cart-button"><i class="fa-solid fa-cart-arrow-down"></i>Add To Cart</a>
                            <a href="#"class="button-contained delete-button"></i>Buy Now</a>
                        </div>
                    </div>
                </div>

5. Card With Text Overlay:

Woodland Shoes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quae dolor ut reprehenderit

₹ 4999

Add To Cart Buy Now

OUT OF STOCK

            
                <div class="card-container vertical-card card-text-overlay">
                    <img src="/pics/product/woodland shoe.jpg">
                    <div>
                        <h2>Woodland Shoes</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quae dolor ut reprehenderit</p>
                        <h2>₹ 4999</h2>
                    </div>
                    <div class="cta">
                        <a href="#" class="button-contained add-to-cart-button"><i class="fa-solid fa-cart-arrow-down"></i>Add To Cart</a>
                        <a href="#"class="button-contained delete-button"></i>Buy Now</a>
                    </div>
                </div>
                <p class="out-of-stock-text">OUT OF STOCK</p>
                </div>

6. Card (for ecomm):

Recommended by: Rajat Gupta

Harry Potter

₹ 4999

Add To Cart 
            
                <div class="card-container">
                    <p>Recommended by: Rajat Gupta</p>
                    <img src="/pics/product/book2.jpg">
                    <h3 class="margin-zero">Harry Potter</h3>
                    <p class="margin-zero">₹ 4999</p>
                    <a href="#" class="button-contained add-to-cart-button">Add To Cart</a>
                </div>

7. Card with dismiss:

✖

Recommended by: Rajat Gupta

Harry Potter

₹ 4999

Add To Cart 
            
                <div class="card-container">
                    <p class="card-badge card-icon-badge">✖</p>  
                    <p>Recommended by: Rajat Gupta</p>
                    <img src="/pics/product/book2.jpg">
                    <h3 class="margin-zero">Harry Potter</h3>
                    <p class="margin-zero">₹ 4999</p>
                    <a href="#" class="button-contained add-to-cart-button">Add To Cart</a>
                </div>

8. Card with badge:

4.5☆

Recommended by: Rajat Gupta

Harry Potter

₹ 4999

Add To Cart 
            
                <div class="card-container">
                    <p class="card-badge card-icon-badge">4.5☆</p>  
                    <p>Recommended by: Rajat Gupta</p>
                    <img src="/pics/product/book2.jpg">
                    <h3 class="margin-zero">Harry Potter</h3>
                    <p class="margin-zero">₹ 4999</p>
                    <a href="#" class="button-contained add-to-cart-button">Add To Cart</a>
                </div>
designed by Rajat Gupta