Catchy Caption
by Author Name
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi officiis repudiandae in aspernatur vel ducimus.
Card
A card is a single contained unit. They can act as a single entry point to a more detailed information. Typically a card can contain a heading text, description, a photo, button and links. Use the .card class on a container and add elements inside it. Check out this page for various types of card layouts.
Basic Card
A card with an image, heading text, description and links. Add a shadow using .shadow class. Make the card corners rounded with .rounded class
Catchy Caption
by Author Name
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi officiis repudiandae in aspernatur vel ducimus.
<article class="card shadow rounded">
<div>
<img src="image.jpg" alt="A cool image" />
</div>
<div class="card-body">
<h3 class="text-huge">Catchy Caption</h3>
<h5 class="text-xsm text-gray">by Author Name</h5>
<p class="text-sm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi
officiis repudiandae in aspernatur vel ducimus.
</p>
<div class="card-links">
<a href="#" class="text-md">read more</a>
<div>
<button>
<i class="far fa-heart icon"></i>
</button>
<button>
<i class="far fa-bookmark icon"></i>
</button>
<button>
<i class="fas fa-share-alt icon"></i>
</button>
</div>
</div>
</div>
</article>
<article class="card shadow">
<div>
<img src="image.jpg" alt="A cool image" />
</div>
<div class="card-body">
<h3 class="text-huge">Catchy Caption</h3>
<h5 class="text-xsm text-gray">by Author Name</h5>
<p class="text-sm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi
officiis repudiandae in aspernatur vel ducimus.
</p>
<div class="card-links">
<a href="#" class="text-md">read more</a>
<div>
<button>
<i class="far fa-heart icon"></i>
</button>
<button>
<i class="far fa-bookmark icon"></i>
</button>
<button>
<i class="fas fa-share-alt icon"></i>
</button>
</div>
</div>
</div>
</article>
Card with Tag and Avatar
Perfect for using on a social media app. It provides a .tag class which can be used to add custom tags or category for your cards.
Travel
Lorem Ipsum
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur, dolorum!
Jane Doe
2h ago<article class="card shadow rounded">
<div>
<img src="image.jpg" alt="A cool image" />
</div>
<div class="card-body">
<span class="tag">Travel</span>
<h3 class="text-huge">Lorem Ipsum</h3>
<p class="text-md">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur,
dolorum!
</p>
<div class="user-info">
<div class="avatar">
<img src="avatar.jpg" alt="" />
</div>
<div>
<h4 class="text-md">Jane Doe</h4>
<small class="text-sm text-gray">2h ago</small>
</div>
</div>
</div>
</article>
Ecommerce Card
Ecommerce Card with 2 buttons and a floated icon button. Add a badge to your cards with the .badge class. This badge can be hidden when not required using the .hidden class.
Caffè latte
Caffè latte is a coffee-based drink made primarily from espresso and steamed milk.
Rs. 199
Rs. 219
10% off
Best Seller
Caffè latte
Caffè latte is a coffee-based drink made primarily from espresso and steamed milk.
Rs. 199
Rs. 219
10% off
Best Seller
Caffè latte
Rs. 199
Rs. 219
10% off
<article class="card rounded">
<div class="badge hidden">Best Seller</div>
<div>
<img src="coffee.jpg" alt="Coffee" />
<button>
<i class="fas fa-heart icon wishlist"></i>
</button>
</div>
<div class="card-body">
<h3 class="text-huge">Caffè latte</h3>
<p>
Caffè latte is a coffee-based drink made primarily from espresso and
steamed milk.
</p>
<div class="price">
<span class="discount-price">Rs. 199</span>
<span class="original-price">Rs. 219</span>
<span class="offer">10% off</span>
</div>
<button class="btn bg-blue rounded">Add to Cart</button>
<button class="btn rounded" disabled>Go to Cart</button>
</div>
</article>
<article class="card rounded">
<div class="badge">Best Seller</div>
<div>
<img src="coffee.jpg" alt="Coffee" />
</div>
<button>
<i class="fas fa-heart icon wishlist"></i>
</button>
<div class="card-body">
<h3 class="text-huge">Caffè latte</h3>
<p>
Caffè latte is a coffee-based drink made primarily from espresso and
steamed milk.
</p>
<div class="price">
<span class="discount-price">Rs. 199</span>
<span class="original-price">Rs. 219</span>
<span class="offer">10% off</span>
</div>
<button class="btn bd-blue rounded">Add to Cart</button>
<button class="btn rounded" disabled>Go to Cart</button>
</div>
</article>
<article class="card card-horizontal flex rounded">
<div class="badge">Best Seller</div>
<div class="image flex">
<img src="coffee.jpg" alt="Coffee" />
</div>
<button>
<i class="fas fa-heart icon wishlist"></i>
</button>
<div class="card-body">
<h3 class="text-huge">Caffè latte</h3>
<div class="price">
<span class="discount-price">Rs. 199</span>
<span class="original-price">Rs. 219</span>
<span class="offer">10% off</span>
</div>
<button class="btn bd-blue rounded">Add to Cart</button>
<button class="btn rounded" disabled>Go to Cart</button>
</div>
</article>
Text Only Card
A generic Text Only Card, with an optional close button. Enhance its look by adding the utility class .border
Caffè latte
Caffè latte is a coffee-based drink made primarily from espresso and steamed milk.
Caffè latte
Caffè latte is a coffee-based drink made primarily from espresso and steamed milk.
<article class="card rounded shadow border">
<div class="card-body">
<h3>Caffè latte</h3>
<p>
Caffè latte is a coffee-based drink made primarily from espresso and
steamed milk.
</p>
</div>
</article>
<article class="card rounded shadow border">
<button>
<i class="fas fa-times icon wishlist"></i>
</button>
<div class="card-body">
<h3>Caffè latte</h3>
<p>
Caffè latte is a coffee-based drink made primarily from espresso and
steamed milk.
</p>
</div>
</article>