Card

Introduction

Cards are generally used for conveying short or brief information about certain product. Cards are commonly used in e-commerce websites to showcase their wide variety for products.

Cards provided by ClutchUI by default take up the entire width of the parent container. Make sure that the parent container has a specific width of your choice

The card is laid out horizontally and the card body takes up the entire width of the parent container. It consits of card image and card body. Card body contians the information about the card such as title, author, product prices and cta buttons.

Air Jordan X

By Nike

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad magnam eius autem? Vitae magni, ea ipsam eaque iste fugit accusantium?

₹49,999 ₹59,999 20% off

Add to cart Save for later

Air Jordan X

By Nike

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad magnam eius autem? Vitae magni, ea ipsam eaque iste fugit accusantium?

₹49,999 ₹59,999 20% off

Add to cart Save for later

Here the card is laid out vertically. Just add the class card--vertical to make the card vertical.

Air Jordan X

By Nike

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad magnam eius autem? Vitae magni, ea ipsam eaque iste fugit accusantium?

₹49,999 ₹59,999 20% off

Add to cart Save for later

Air Jordan X

By Nike

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad magnam eius autem? Vitae magni, ea ipsam eaque iste fugit accusantium?

₹49,999 ₹59,999 20% off

Add to cart Save for later

These cards only contain text content and no image.

These cards have a overlay on top of the card. It's commonly used to show products which are sold out. You can implement it by using the card--overlay class in your code.

Air Jordan X

By Nike

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad magnam eius autem? Vitae magni, ea ipsam eaque iste fugit accusantium?

₹49,999 ₹59,999 20% off

Add to cart Save for later

Out of stock

Cards have an extra button which can be used to dismiss the card.You can implement it by using the card--dismiss class in your code.

Air Jordan X

By Nike

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad magnam eius autem? Vitae magni, ea ipsam eaque iste fugit accusantium?

₹49,999 ₹59,999 20% off

Add to cart Save for later

Badges in cards are used to convey some additional information about the card.You can implement it by using the card--badge class in your code.

Air Jordan X

By Nike

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad magnam eius autem? Vitae magni, ea ipsam eaque iste fugit accusantium?

₹69,999 ₹79,999 20% off

Add to cart Save for later

20% off