Cards
Cards contain content and actions on a single topic or subject. They should be easy to scan for relevant and actionable information. Elements like text and images, should be placed on them in a way that clearly indicates hierarchy.
Basic Card
Use the card-basic class along with the card class on your div to get a basic card design.
Cutest Dogs Ever
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, beatae. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia dolor obcaecati possimus laborum? Ea numquam cum iste est eum. Ipsa.
Basic Card with Text over Media
You can get this variant by adding card-text-over-media class alongside the card class on your div tag.
Cutest Dogs Ever
by Raksha Pawar
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, beatae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati minima eveniet reprehenderit vitae maxime, ducimus eligendi aperiam voluptas officiis. Aliquam?
Basic Card with Header
You can add this variant by using the card-basic-with-header class on your div tag.
Cutest Dogs Ever
by Raksha Pawar
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, beatae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, aliquid culpa? Explicabo in sequi nihil. Esse ipsum odio molestiae? Id.
Card with only buttons
You can add the card-with-buttons class to get this card variant.
Cutest Dogs Ever
by Raksha Pawar
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, beatae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde dignissimos doloribus nobis ex reprehenderit corporis aliquid hic vero autem beatae!
Card with only icons
You can use the card-with-icons class to get this variant of card which contains only icons and no buttons.
Cutest Dogs Ever
by Raksha Pawar
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, beatae. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt ipsa pariatur veritatis amet laborum error debitis eaque impedit ducimus porro?
Horizontal Card with Image and Text
Use the card-horizontal class alongside the card class to use this variant of card.
Cutest Dogs Ever
by Raksha Pawar
Text-Only Card
Use the basic card layout and remove the image container to get a text-only card.
Cutest Dogs Ever
by Raksha Pawar
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, beatae. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia dolor obcaecati possimus laborum? Ea numquam cum iste est eum. Ipsa.
Card With Dismiss
Use the card-dismiss class alongside the card class to get the card with dismiss icon.
Cutest Dogs Ever
by Raksha Pawar
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, beatae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod cupiditate ipsa adipisci blanditiis, dignissimos aliquam minus aliquid explicabo accusantium deserunt.
Card with Badge
Use the card-badge class alongside the card class to get the card with badge.
New
Cutest Dogs Ever
by Raksha Pawar
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, beatae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod cupiditate ipsa adipisci blanditiis, dignissimos aliquam minus aliquid explicabo accusantium deserunt.
Card with Overlay
Use the card-overlay class to get a card with overlay.
Cutest Dogs Ever
by Raksha Pawar
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, beatae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod cupiditate ipsa adipisci blanditiis, dignissimos aliquam minus aliquid explicabo accusantium deserunt.
Vertical E-Commerce Card
Horizontal E-Commerce Card
Product Title
Product Category
₹ 10000
2
E-Commerce Billing Card
Price Details
Price (2 items)
₹ 10000
Discount
₹ 1500
Delivery
₹ 150
Total Amount
₹ 8650