Card

Cards group and display information related to a product, category or service using components like text, images, badges, etc to grab the user's attention.

we offer the following range of cards - Vertical card, Horizontal card, Card with badge, Card with dismiss button, Card with overlay Text, Card with only Text, and Card with Shadow,

Vertical Card

A basic card may contain product image, product name, company name, description of products, some buttons and icons. You can use card-container for card layout and for components use card-image, card-author, card-content etc.as shown below.

Horizontal Card

A basic card with badge will contain all the things that basic card have and also one extra thing which is the badge which will be on image. You can use card-container-Horizontal> for card layout, card-badge for dismiss button and for components use card-image, card-author, card-content etc. classes as shown below.

Basic Card w/ badge

A basic card with badge will contain all the things that basic card have and also one extra thing which is the badge which will be on image. You can use card-container for card layout, card-badgefor dismiss button and for components use card-image, card-author, card-content etc. classes as shown below.

Basic Card w/ dismiss

A basic card with dismiss will contain all the things that basic card have and also one extra thing which is the dismiss button which will be on image. You can use card-container for card layout dismiss for dismiss button and for components use card-image,card-author, card-content etc. classes as shown below.

Card with Text overlay

A basic card with text overlay will contain all the things that basic card have except the heading text which will be on image. You can use card-container for card layout and for components use card-image, card-author, card-content etc. classes as shown below.

Text only Card

A text only card will contain only texts like product name , description etc, it will not contain any images and buttons. You can use card-container for card layout and for components use card-author, card-content etc. classes as shown below.

Card with Shadow

This card contain a shadow around it. Take any above mentioned cards of your choice and just add the class card-shadowalong with card-container for card layout and for components use card-image, card-author, card-content etc.as shown below.