Cards
eCommerce cards
Cards & panels components dedicated to building eCommerce projects.
Basic example
Card title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ab. Delectus, provident nesciunt asperiores, totam ipsum vero aut autem voluptatibus ex dicta maxime ea aperiam eum! Dignissimos suscipit dolorum commodi?
<!-- Card -->
<div class="card">
<div class="card-body">
<h5>Card title</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ab. Delectus, provident nesciunt
asperiores, totam ipsum vero aut autem voluptatibus ex dicta maxime ea aperiam eum! Dignissimos
suscipit dolorum commodi?</p>
<hr>
<button type="button" class="btn btn-primary btn-md">Button</button>
</div>
</div>
<!-- Card -->
Advanced example
Fantasy T-shirt
Shirts
$12.99
$36.99
<!-- Card -->
<div class="card">
<div class="view zoom overlay">
<img class="img-fluid w-100" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.jpg" alt="Sample">
<h4 class="mb-0"><span class="badge badge-primary badge-pill badge-news">Sale</span></h4>
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="card-body text-center">
<h5>Fantasy T-shirt</h5>
<p class="small text-muted text-uppercase mb-2">Shirts</p>
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
</ul>
<hr>
<h6 class="mb-3">
<span class="text-danger mr-1">$12.99</span>
<span class="text-grey"><s>$36.99</s></span>
</h6>
<button type="button" class="btn btn-primary btn-sm mr-1 mb-2">
<i class="fas fa-shopping-cart pr-2"></i>Add to cart
</button>
<button type="button" class="btn btn-light btn-sm mr-1 mb-2">
<i class="fas fa-info-circle pr-2"></i>Details
</button>
<button type="button" class="btn btn-danger btn-sm px-3 mb-2 material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Add to wishlist">
<i class="far fa-heart"></i>
</button>
</div>
</div>
<!-- Card -->
Supported content
Cards are very flexible containers and apart from the supported content listed below, you can put almost any element in them. Take the following list as examples rather than rigid guidelines.
Image with zoom
<!-- Card -->
<div class="card">
<!-- Image with zoom -->
<div class="view zoom overlay">
<img class="img-fluid w-100" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg" alt="Sample">
<a href="#!">
<div class="mask">
<img class="img-fluid w-100" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<!-- Image with zoom -->
</div>
<!-- Card -->
Image without zoom
<!-- Card -->
<div class="card">
<!-- Image without zoom -->
<div class="view overlay">
<img class="img-fluid w-100" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg"
alt="Sample">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Image without zoom -->
</div>
<!-- Card -->
Title
Fantasy T-shirt
<!-- Card -->
<div class="card">
<div class="card-body">
<!-- Title -->
<h5>Fantasy T-shirt</h5>
</div>
</div>
<!-- Card -->
Subtitle
Shirts
<!-- Card -->
<div class="card">
<div class="card-body">
<!-- Subtitle -->
<p class="small text-muted text-uppercase">Shirts</p>
</div>
</div>
<!-- Card -->
Rating
<!-- Card -->
<div class="card">
<div class="card-body">
<!-- Rating -->
<ul class="rating my-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
</ul>
<!-- Rating -->
</div>
</div>
<!-- Card -->
Divider
<!-- Card -->
<div class="card">
<div class="card-body">
<!-- Divider -->
<hr>
</div>
</div>
<!-- Card -->
Price
$12.99
$12.99
$36.99
<!-- Card -->
<div class="card">
<div class="card-body">
<!-- Price -->
<h6 class="mb-2"><span>$12.99</span></h6>
<h6 class="mb-0">
<span class="text-danger mr-1">$12.99</span>
<span class="text-grey"><s>$36.99</s></span>
</h6>
<!-- Price -->
</div>
</div>
<!-- Card -->
Tooltip
<!-- Card -->
<div class="card">
<div class="card-body">
<!-- Tooltip -->
<button type="button" class="btn btn-danger btn-sm px-3 my-1 material-tooltip-main" data-toggle="tooltip"
data-placement="top" title="Add to wishlist">
<i class="far fa-heart"></i>
</button>
</div>
</div>
<!-- Card -->
$(function () {
$('.material-tooltip-main').tooltip({
template: '<div class="tooltip md-tooltip-main"><div class="tooltip-arrow md-arrow"></div><div class="tooltip-inner md-inner-main"></div></div>'
})
})
Badges
Sale
<!-- Card -->
<div class="card">
<div class="card-body">
<!-- Badge -->
<h4 class=""><span class="badge badge-primary badge-pill badge-news">Sale</span></h4>
</div>
</div>
<!-- Card -->
Removing shadows
Fantasy T-shirt
Shirts
<!-- Card -->
<div class="">
<div class="view overlay z-depth-2 rounded">
<img class="img-fluid w-100" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg"
alt="Sample">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="text-center pt-4">
<h5>Fantasy T-shirt</h5>
<p class="small text-muted text-uppercase mb-2">Shirts</p>
<button type="button" class="btn btn-primary btn-sm mr-1 mb-2">Add to cart</button>
<button type="button" class="btn btn-danger btn-sm px-3 mb-2"><i class="far fa-heart"></i></button>
</div>
</div>
<!-- Card -->
Questions or feedback?
Let us know