Card
Cards are flexible and extensible content container, that are used to draw user's attention towards the content. CSS cards are great for organizing and enhancing a website's user interface. Each card is uniquely designed to make it easy for users to read the card content. Card component consist of card | card-header | card-body | card-footer as main classes which can be used to create custom styles.
Card with Text
Create a Simple Card with Text using above mentioned classes
Card-Title
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi voluptatibus inventore illum maiores dolorum, sunt quis tenetur quae nulla voluptas?
<div class = "card">
<div class = "card-header">
<h3> Card-title </h3>
</div>
<div class = "card-body">
<p> Lorem ipsum dolor sit amet consectetur adipisicing
elit. Facilis, inventore.</p>
</div>
</div>
Card with Image
Card
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio, magnam.
<div class = "card">
<div class = "card-header">
<img src ="/..." />
</div>
<div class = "card-body">
<p> Lorem ipsum dolor sit amet consectetur adipisicing
elit. Facilis, inventore.</p>
<div class = "card-footer">
<button class= "btn btn-primary" >Button </button>
<button class= "btn btn-secondary" >Button </button>
</div>
</div>
</div>
Card with Badge and Dismiss
Card
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio, magnam.
Card
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio, magnam.
< -- Card With Badge -- >
<div class = "card">
<div class = "card-header">
<span class = card-badge> ❤ </span>
<img src ="/..." />
</div>
<div class = "card-body">
<h3 class = "card-heading"> Card Title </h3>
<p class = "card-text"> Lorem ipsum dolor sit amet consectetur adipisicing
elit. Facilis, inventore.</p>
<div class = "card-footer">
<button class= "btn btn-primary" >Button </button>
<button class= "btn btn-secondary" >Button </button>
</div>
</div>
</div>
< -- Card With Dismiss -- >
<div class = "card">
<div class = "card-header">
<span class = card-badge> × </span>
<img src ="/..." />
</div>
<div class = "card-body">
<h3 class = "card-heading"> Card Title </h3>
<p class = "card-text"> Lorem ipsum dolor sit amet consectetur adipisicing
elit. Facilis, inventore.</p>
<div class = "card-footer">
<button class= "btn btn-primary" >Button </button>
<button class= "btn btn-secondary" >Button </button>
</div>
</div>
</div>
E-commerce cards
Product Name
Rs. 1999 only. Rs. 2999
Hope Pot Set
Rs. 1999 only. Rs. 2999
< -- simple e-com card -->
<div class = "card ecom-card">
<div class = "card-header">
<img src ="/..." />
</div>
<div class = "card-body">
<h3 class = "card-heading"> Product Name </h3>
<p class = "card-text"> Rs. 1999 only. <span
class = "ecom-card-price">Rs.2999
</span>
</p>
<div class = "card-footer">
<button class= "btn btn-primary" >Button </button>
<button class= "btn btn-secondary" >Button </button>
</div>
</div>
< -- e-com card with badge -->
<div class = "card ecom-card">
<div class = "card-header">
<span class = "card-badge">
❤ </span>
<span class = "ecom-badge">
New Arrival </span>
<img src ="/..." />
</div>
<div class = "card-body">
<h3 class = "card-heading"> Product Name </h3>
<p class = "card-text"> Rs. 1999 only. <span
class = "ecom-card-price">Rs.2999
</span>
</p>
<div class = "card-footer">
<button class= "btn btn-primary btn-icon" > <svg>
</svg> Add To Cart </button>
</div>
</div>
Horizontal card
Hope Pot Set
Rs. 1999 only. Rs. 2999
<div class = "card flex-card">
<div class = "column">
<img class = "img-responsive" src = "/..." />
</div>
<div class = "column">
<h3 class = "card-heading">Hope Pot Set </h3>
<p class = "card-text"> Rs. 1999 only. <span
class = "ecom-card-price">Rs.2999
</span>
</p>
<button class= "btn btn-primary btn-icon" > <svg>
</svg> Add To Cart </button>
</div>
</div>
Card with text overlay
Hope Pot Set
Rs. 1999 only. Rs. 2999
Out Of Stocks
<div class = "card">
<div class = "card-header card-overlay">
<img src ="/..." />
<div class = "card-body">
<h3> Out Of Stocks</h3>
</div>
</div>