Cards

Cards can be used for various purpose like social media, e-comm websites etc. They can have a lot of variations to serve the purpose.

Only Text Card
The Minions
Minions is a 2015 American computer-animated comedy film produced by Illumination Entertainment and distributed by Universal Pictures. It is the spin-off prequel and the third installment overall in the Despicable Me franchise. 

<div class="card shadow">
<div class="card-content">
<div class="card-content-title">The Minions</div>
<div class="card-content-text">
Text
</div>
</div></div>
Simple Image Card
image
Minions
Minions is a 2015 American computer-animated comedy film produced by Illumination Entertainment and distributed by Universal Pictures. It is the spin-off prequel and the third installment overall in the Despicable Me franchise. 

<div class="card shadow">
<div class="card-image-container">
<img src="" alt="image" class="card-image"/> 
</div>
<div class="card-content">
<div class="card-image-content-title">Minions</div>
<div class="card-image-content-text">
Text
</div>
</div>
</div>
Image Card with Footer
image
atomic habits
This breakthrough book from James Clear is the most comprehensive guide on how to change your habits and get 1% better every day. 

<div class="card shadow">
<div class="card-image-container">
<img src="" alt="image"class="card-image" /> 
</div>
<div class="card-content">
<div class="card-image-content-title">atomic habits</div>
<div class="card-image-content-text">
Text
</div></div>
<footer class="card-footer">
<div>
<button class="card-footer-btn">READ</button>
<button class="card-footer-btn">BOOKMARK</button>
</div>
<div class="card-footer-icon">
<i class="far fa-heart"></i>
<i class="fas fa-share"></i>
<i class="fas fa-ellipsis-v"></i>
</div>
</footer>
</div>
Card with Text Overlay
image
Tied ribbons
Set of 3 Wall Arts
Rs. 2192 Rs. 5099   (57% OFF) 

<div class="card card-image shadow">
<div class="card-image-container">
<img  src="" alt="image" class="card-image" />  
<div class="card-content card-text-overlay">
<div class="card-image-content-title">Tied ribbons</div>
<div class="card-image-content-text">Set of 3 Wall Arts</div>
</div>
</div>
<div class="card-content">
Rs. 2192<del>Rs. 5099</del>  
<span class="card-text-red">(57% OFF)</span>
</div>
<footer class="card-footer">
<div>
<button class="card-footer-btn">buy now</button>
<button class="card-footer-btn">add to cart</button>
</div>
</footer>
</div>
Horizontal Card
lenovo Ideapad Flex 5
(8 GB/512 GB SSD/Windows 10 Home) 5 14ITL05 2 in 1 Laptop (14 inch, Graphite Grey, 1.5 kg, With MS Office)
Rs. 72,990 Rs. 90,000   (18% OFF) 

<div class="card card-image card-hr shadow">
<div class="card-image-container card-hr-image-container">
<img src="" /> 
</div>
<div class="card-hr-content">
<div class="card-content">
<div class="card-image-content-title">lenovo Ideapad Flex 5</div>
<div class="card-image-content-text">
Text
</div>
<div>
Rs. 72,990<del>Rs. 90,000</del>  
<span class="card-text-red">(18% OFF)</span>
</div>
</div>
<div class="card-btn-container">
<button class="card-btn">buy now</button>
<button class="card-btn">add to cart</button>
</div>
</div>
</div>
E-Commerce Card
image
INDIA CIRCUS
Set of 2 Cups
Rs. 696 Rs. 839   (17% OFF) 

<div class="card card-image shadow">
<div class="card-image-container">
<img src="" alt="image" class="card-image"  />
</div>
<div class="card-content">
<div class="card-image-content-title">INDIA CIRCUS</div>
<div class="card-image-content-text">Set of 2 Cups</div>
<div>
Rs. 696 <del>Rs. 839</del>  
<span class="card-text-red">(17% OFF)</span>
</div>
</div>
</div>
image
4.7   |   78
INDIA CIRCUS
Set of 2 Cups
Rs. 696 Rs. 839   (17% OFF) 

<div class="card card-image shadow">
<div class="card-image-container">
<img src="" alt="image"  class="card-image" />
<div class="card-rating">
<span class="rating">4.7</span>
<i class="fas fa-star card-icon-star"></i>   |   78
</div>
</div>
<div class="card-content">
<div class="card-image-content-title">INDIA CIRCUS</div>
<div class="card-image-content-text">Set of 2 Cups</div>
<div>
Rs. 696<del>Rs. 839</del>  
<span class="card-text-red">(17% OFF)</span>
</div>
</div>
<footer class="card-footer">
<div>
<button class="card-footer-btn">buy now</button>
<button class="card-footer-btn">add to cart</button>
</div>
<div class="card-footer-icon">
<i class="far fa-heart"></i>
<i class="fas fa-share"></i>
<i class="fas fa-ellipsis-v"></i>
</div>
</footer>
</div>
trending
image
Tied ribbons
Set of 3 Wall Arts
Rs. 2192 Rs. 5099   (57% OFF) 

<div class="card card-image shadow">
<div class="card-badge">trending</div>
<div class="card-image-container">
<img src=""  alt="image" class="card-image"  />
</div>
<div class="card-content">
<div class="card-image-content-title">Tied ribbons</div>
<div class="card-image-content-text">Set of 3 Wall Arts</div>
<div>
Rs. 2192<del>Rs. 5099</del>  
<span class="card-text-red">(57% OFF)</span>
</div>
</div>
</div>
image
Tied ribbons
Set of 3 Wall Arts
Rs. 2192 Rs. 5099   (57% OFF)
image
INDIA CIRCUS
Set of 2 Cups
Rs. 696 Rs. 839   (17% OFF) 

<div class="card card-image shadow">
<i class="fas fa-times card-icon-dismiss"></i>
<div class="card-image-container">
<img src="" alt="image" class="card-image"/>
</div>                          
<div class="card-content">
<div class="card-image-content-title">Tied ribbons</div>
<div class="card-image-content-text">Set of 3 Wall Arts</div>
<div>
Rs. 2192<del>Rs. 5099</del>  
<span class="card-text-red">(57% OFF)</span>
</div>
</div>
</div>

<div class="card card-image shadow">
<div class="card-image-container">
<img src="" alt="image"class="card-image" />
<i class="fas fa-heart card-icon-heart"></i>
</div>
<div class="card-content">
<div class="card-image-content-title">INDIA CIRCUS</div>
<div class="card-image-content-text">Set of 2 Cups</div>
<div>
Rs. 696<del>Rs. 839</del>  
<span class="card-text-red">(17% OFF)</span>
</div>
</div>
</div>
image
INDIA CIRCUS
Set of 2 Cups
Rs. 696 Rs. 839   (17% OFF)
limited offer
image
Tied ribbons
Set of 3 Wall Arts
Rs. 2192 Rs. 5099   (57% OFF) 

<div class="card card-image shadow">
<div class="card-image-container">
<img src="" alt="image" class="card-image" />   
</div>
<div class="card-content">
<div class="card-image-content-title">INDIA CIRCUS</div>
<div class="card-image-content-text">Set of 2 Cups</div>
<div>
Rs. 696 <del>Rs. 839</del>  
<span class="card-text-red">(17% OFF)</span>
</div>
</div>
<div class="card-btn-container">
<button class="card-btn">buy now</button>
<button class="card-btn">add to cart</button>
</div>
</div>
    
<div class="card card-image shadow">
<div class="card-badge">limited offer</div>
<div class="card-image-container">
<img src="" alt="image" class="card-image" />
<i class="fas fa-heart card-icon-heart"></i>
</div>
<div class="card-content">
<div class="card-image-content-title">Tied ribbons</div>
<div class="card-image-content-text">Set of 3 Wall Arts</div>
<div>
Rs. 2192 <del>Rs. 5099</del>  
<span class="card-text-red">(57% OFF)</span>
</div>
</div>
<div class="card-btn-container">
<button class="card-btn">buy now</button>
<button class="card-btn">add to cart</button>
</div>
</div>
Button
Image