Cards
Cards are a convenient means of displaying content composed of different types of objects. They are also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.
COMPONENT DEMO
Cards with Badges
Proteinated Milk
By Humpy A2
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis, blanditiis accusantium, ea neque sunt provident veniam error sint dolores quia soluta. Fugit reiciendis debitis expedita, quod dolor odio consequuntur ad!
₹600
₹1000
40% off
<!-- CARDS WITH BADGES -->
<div class="card card-vertical">
<!-- CARD HEADER -->
<div class="card-header">
<div class="card-badge card-badge-info">
<span>TRENDING</span>
</div>
<div class="card-dismiss">
<i class="far fa-times-circle card-dismiss-icon"></i>
</div>
</div>
<!-- CARD MEDIA -->
<img
loading="lazy"
src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_1024/nusnyjv4vv1teca0txre"
alt="Milk Packet"
class="card-media-img"
/>
<!-- CARD CONTENT -->
<div class="card-content">
<h4 class="txt-bold card-details-title">Proteinated Milk</h4>
<p class="card-details-subtitle">By Humpy A2</p>
<p class="card-description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Nobis, blanditiis accusantium, ea neque sunt provident veniam
error sint dolores quia soluta. Fugit reiciendis debitis
expedita, quod dolor odio consequuntur ad!
</p>
<p class="card-pricing">
<span class="card-price">₹600</span>
<del class="card-original-price">₹1000</del>
<span class="card-discount">40% off</span>
</p>
</div>
<!-- CARD ACTIONS -->
<div class="card-actions">
<button class="btn btn-warning btn-warning-hover">
BUY NOW
</button>
<button class="btn btn-link btn-primary-hover">
ADD TO CART
</button>
<div class="card-icon-action">
<a class="link-none" href="#"
><i class="fas fa-heart wish-icon"></i
></a>
</div>
</div>
</div>
</div>
Cards With Dismiss
Proteinated Milk
By Humpy A2
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis, blanditiis accusantium, ea neque sunt provident veniam error sint dolores quia soluta. Fugit reiciendis debitis expedita, quod dolor odio consequuntur ad!
₹600
₹1000
40% off
<!-- CARDS WITH DISMISS ICON -->
<div class="card card-vertical">
<!-- CARD HEADER -->
<div class="card-header">
<div class="card-dismiss">
<i class="far fa-times-circle card-dismiss-icon"></i>
</div>
</div>
<!-- CARD MEDIA -->
<img
loading="lazy"
src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_1024/nusnyjv4vv1teca0txre"
alt="Milk Packet"
class="card-media-img"
/>
<!-- CARD CONTENT -->
<div class="card-content">
<h4 class="txt-bold card-details-title">Proteinated Milk</h4>
<p class="card-details-subtitle">By Humpy A2</p>
<p class="card-description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Nobis, blanditiis accusantium, ea neque sunt provident veniam
error sint dolores quia soluta. Fugit reiciendis debitis
expedita, quod dolor odio consequuntur ad!
</p>
<p class="card-pricing">
<span class="card-price">₹600</span>
<del class="card-original-price">₹1000</del>
<span class="card-discount">40% off</span>
</p>
</div>
<!-- CARD ACTIONS -->
<div class="card-actions">
<button class="btn btn-warning btn-warning-hover">
BUY NOW
</button>
<button class="btn btn-link btn-primary-hover">
ADD TO CART
</button>
<div class="card-icon-action">
<a class="link-none" href="#"
><i class="fas fa-heart wish-icon"></i
></a>
</div>
</div>
</div>
</div>
CARDS WITH TEXT OVERLAY
Proteinated Milk
By Humpy A2
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis, blanditiis accusantium, ea neque sunt provident veniam error sint dolores quia soluta. Fugit reiciendis debitis expedita, quod dolor odio consequuntur ad!
₹600
₹1000
40% off
<!-- CARDS WITH TEXT ON OVERLAY -->
<div class="card card-vertical card-overlay">
<!-- TEXT TO BE SHOWN ON CARD OVERLAY -->
<div class="overlay-text-container">
<div class="card-overlay-text">OUT OF STOCK</div>
</div>
<!-- CARD HEADER -->
<div class="card-header">
<div class="card-badge card-badge-info">
<span>BESTSELLER</span>
</div>
<div class="card-dismiss">
<i class="far fa-times-circle card-dismiss-icon"></i>
</div>
</div>
<!-- CARD MEDIA -->
<img
loading="lazy"
src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_1024/nusnyjv4vv1teca0txre"
alt="Milk packet"
class="card-media-img"
/>
<!-- CARD CONTENT -->
<div class="card-content">
<h4 class="txt-bold card-details-title">Proteinated Milk</h4>
<p class="card-details-subtitle">By Humpy A2</p>
<p class="card-description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Nobis, blanditiis accusantium, ea neque sunt provident veniam
error sint dolores quia soluta. Fugit reiciendis debitis
expedita, quod dolor odio consequuntur ad!
</p>
<p class="card-pricing">
<span class="card-price">₹600</span>
<del class="card-original-price">₹1000</del>
<span class="card-discount">40% off</span>
</p>
</div>
<!-- CARD ACTIONS -->
<div class="card-actions">
<button class="btn btn-warning btn-warning-hover">
BUY NOW
</button>
<button class="btn btn-link btn-primary-hover">
ADD TO CART
</button>
<div class="card-icon-action">
<a class="link-none" href="#"
><i class="fas fa-heart wish-icon"></i
></a>
</div>
</div>
</div>
</div>
TEXT ONLY CARDS
Proteinated Milk
By Humpy A2
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis, blanditiis accusantium, ea neque sunt provident veniam error sint dolores quia soluta. Fugit reiciendis debitis expedita, quod dolor odio consequuntur ad!
₹600
₹1000
40% off
<!-- TEXT ONLY CARDS -->
<div class="card card-vertical">
<!-- CARD HEADER -->
<div class="card-header">
<div class="card-badge card-badge-info">
<span>TRENDING</span>
</div>
<div class="card-dismiss">
<i class="far fa-times-circle card-dismiss-icon"></i>
</div>
</div>
<!-- CARD CONTENT -->
<div class="card-content">
<h4 class="txt-bold card-details-title">Proteinated Milk</h4>
<p class="card-details-subtitle">By Humpy A2</p>
<p class="card-description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Nobis, blanditiis accusantium, ea neque sunt provident veniam
error sint dolores quia soluta. Fugit reiciendis debitis
expedita, quod dolor odio consequuntur ad!
</p>
<p class="card-pricing">
<span class="card-price">₹600</span>
<del class="card-original-price">₹1000</del>
<span class="card-discount">40% off</span>
</p>
</div>
<!-- CARD ACTIONS -->
<div class="card-actions">
<button class="btn btn-warning btn-warning-hover">
BUY NOW
</button>
<button class="btn btn-link btn-primary-hover">
ADD TO CART
</button>
<div class="card-icon-action">
<a class="link-none" href="#"
><i class="fas fa-heart wish-icon"></i
></a>
</div>
</div>
</div>
</div>
CARDS WITH BOX SHADOW
Proteinated Milk
By Humpy A2
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis, blanditiis accusantium, ea neque sunt provident veniam error sint dolores quia soluta. Fugit reiciendis debitis expedita, quod dolor odio consequuntur ad!
₹600
₹1000
40% off
<!-- CARDS WITH BOX SHADOW -->
<div class="card card-vertical card-shadow">
<!-- CARD HEADER -->
<div class="card-header">
<div class="card-badge card-badge-info">
<span>TRENDING</span>
</div>
<div class="card-dismiss">
<i class="far fa-times-circle card-dismiss-icon"></i>
</div>
</div>
<!-- CARD MEDIA -->
<img
loading="lazy"
src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_1024/nusnyjv4vv1teca0txre"
alt="Milk packet"
class="card-media-img"
/>
<!-- CARD CONTENT -->
<div class="card-content">
<h4 class="txt-bold card-details-title">Proteinated Milk</h4>
<p class="card-details-subtitle">By Humpy A2</p>
<p class="card-description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Nobis, blanditiis accusantium, ea neque sunt provident veniam
error sint dolores quia soluta. Fugit reiciendis debitis
expedita, quod dolor odio consequuntur ad!
</p>
<p class="card-pricing">
<span class="card-price">₹600</span>
<del class="card-original-price">₹1000</del>
<span class="card-discount">40% off</span>
</p>
</div>
<!-- CARD ACTIONS -->
<div class="card-actions">
<button class="btn btn-warning btn-warning-hover">
BUY NOW
</button>
<button class="btn btn-link btn-primary-hover">
ADD TO CART
</button>
<div class="card-icon-action">
<a class="link-none" href="#"
><i class="fas fa-heart wish-icon"></i
></a>
</div>
</div>
</div>
</div>
HORIZONTAL CARD(when viewed on phone gets converted to vertical format)
Proteinated Milk
By Humpy A2
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis, blanditiis accusantium, ea neque sunt provident veniam error sint dolores quia soluta. Fugit reiciendis debitis expedita, quod dolor odio consequuntur ad!
₹600
₹1000
40% off
<!-- HORIZONTAL CARD-->
<div class="card card-horizontal">
<div class="card-badge card-badge-success card-horizontal-badge">
<span>IN STOCK</span>
</div>
<div class="card-dismiss card-horizontal-dismiss">
<i class="far fa-times-circle card-dismiss-icon"></i>
</div>
<!-- CARD MEDIA -->
<img
loading="lazy"
src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_1024/nusnyjv4vv1teca0txre"
class="card-media-img card-horizontal-media-img"
alt="Milk Packet"
/>
<!-- CARD CONTENT -->
<div class="card-content card-content-horizontal">
<h4 class="txt-bold card-details-title">Proteinated Milk</h4>
<p class="card-details-subtitle">By Humpy A2</p>
<p class="card-description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Nobis, blanditiis accusantium, ea neque sunt provident veniam
error sint dolores quia soluta. Fugit reiciendis debitis
expedita, quod dolor odio consequuntur ad!
</p>
<p class="card-pricing">
<span class="card-price">₹600</span>
<del class="card-original-price">₹1000</del>
<span class="card-discount">40% off</span>
</p>
<div class="card-actions">
<button class="btn btn-warning btn-warning-hover">
BUY NOW
</button>
<button class="btn btn-link btn-primary-hover">
ADD TO CART
</button>
<div class="card-icon-action">
<a class="link-none" href="#"
><i class="fas fa-heart wish-icon"></i
></a>
<a class="link-none" href="#"
><i class="fas fa-share wish-icon"></i
></a>
</div>
</div>
</div>
</div>
</div>
VERTICAL CARD
Proteinated Milk
By Humpy A2
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis, blanditiis accusantium, ea neque sunt provident veniam error sint dolores quia soluta. Fugit reiciendis debitis expedita, quod dolor odio consequuntur ad!
₹600
₹1000
40% off
Proteinated Milk
By Humpy A2
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis, blanditiis accusantium, ea neque sunt provident veniam error sint dolores quia soluta. Fugit reiciendis debitis expedita, quod dolor odio consequuntur ad!
₹600
₹1000
40% off
<!-- VERTICAL CARD -->
<div class="card card-vertical">
<!-- CARD HEADER -->
<div class="card-header">
<div class="card-badge card-badge-success">
<span>IN STOCK</span>
</div>
<div class="card-dismiss">
<i class="far fa-times-circle card-dismiss-icon"></i>
</div>
</div>
<!-- CARD IMAGE -->
<img
loading="lazy"
src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_1024/nusnyjv4vv1teca0txre"
alt="Milk packet"
class="card-media-img"
/>
<!-- CARD CONTENT -->
<div class="card-content">
<h4 class="txt-bold card-details-title">Proteinated Milk</h4>
<p class="card-details-subtitle">By Humpy A2</p>
<p class="card-description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Nobis, blanditiis accusantium, ea neque sunt provident veniam
error sint dolores quia soluta. Fugit reiciendis debitis
expedita, quod dolor odio consequuntur ad!
</p>
<p class="card-pricing">
<span class="card-price">₹600</span>
<del class="card-original-price">₹1000</del>
<span class="card-discount">40% off</span>
</p>
</div>
<!-- CARD ACTIONS -->
<div class="card-actions">
<button class="btn btn-warning btn-warning-hover">
BUY NOW
</button>
<button class="btn btn-link btn-primary-hover">
ADD TO CART
</button>
<div class="card-icon-action">
<a class="link-none" href="#"
><i class="fas fa-heart wish-icon"></i
></a>
</div>
</div>
</div>
<!-- VERTICAL CARD -->
<div class="card card-vertical">
<!-- CARD HEADER -->
<div class="card-header">
<div class="card-badge card-badge-success">
<span>IN STOCK</span>
</div>
<div class="card-dismiss">
<i class="far fa-times-circle card-dismiss-icon"></i>
</div>
</div>
<!-- CARD MEDIA -->
<img
loading="lazy"
src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_1024/nusnyjv4vv1teca0txre"
alt="Milk Packet"
class="card-media-img"
/>
<!-- CARD CONTENT -->
<div class="card-content">
<h4 class="txt-bold card-details-title">Proteinated Milk</h4>
<p class="card-details-subtitle">By Humpy A2</p>
<p class="card-description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Nobis, blanditiis accusantium, ea neque sunt provident veniam
error sint dolores quia soluta. Fugit reiciendis debitis
expedita, quod dolor odio consequuntur ad!
</p>
<p class="card-pricing">
<span class="card-price">₹600</span>
<del class="card-original-price">₹1000</del>
<span class="card-discount">40% off</span>
</p>
</div>
<!-- CARD ACTIONS -->
<div class="card-actions">
<button class="btn btn-warning btn-warning-hover">
BUY NOW
</button>
<button class="btn btn-link btn-primary-hover">
ADD TO CART
</button>
<div class="card-icon-action">
<a class="link-none" href="#"
><i class="fas fa-heart wish-icon"></i
></a>
<a class="link-none" href="#"
><i class="fas fa-share wish-icon"></i
></a>
</div>
</div>
</div>
</div>