Product
Display list of product
Product 01
<div style="max-width: 330px;">
<div class="card border-0 product">
<div class="position-relative">
<img src="../../images/product-01.jpg" alt="Product 01">
<div class="card-img-overlay d-flex p-3">
<div>
<span class="badge badge-primary">-20%</span>
</div>
<div class="my-auto w-100 content-change-vertical">
<a href="#" data-toggle="tooltip" data-placement="left" title="View products"
class="add-to-cart ml-auto d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle mb-2">
<svg class="icon icon-shopping-bag-open-light fs-24">
<use xlink:href="#icon-shopping-bag-open-light"></use>
</svg>
</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Quick view"
class="preview ml-auto d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle mb-2">
<svg class="icon icon-eye-light fs-24">
<use xlink:href="#icon-eye-light"></use>
</svg>
</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Add to wishlist"
class="add-to-wishlist ml-auto d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle mb-2">
<svg class="icon icon-star-light fs-24">
<use xlink:href="#icon-star-light"></use>
</svg>
</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Compare"
class="add-to-compare ml-auto d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle">
<svg class="icon icon-arrows-left-right-light fs-24">
<use xlink:href="#icon-arrows-left-right-light"></use>
</svg>
</a>
</div>
</div>
</div>
<div class="card-body pt-4 text-center px-0">
<p class="card-text font-weight-bold fs-16 mb-1 text-secondary">
<span class="fs-13 font-weight-500 text-decoration-through text-body pr-1">$39.00</span>
<span>$29.00</span>
</p>
<h2 class="card-title fs-15 font-weight-500 mb-2"><a href="#">Facial cleanser</a></h2>
<div class="d-flex align-items-center justify-content-center flex-wrap">
<ul class="list-inline mb-0 lh-1">
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
</ul>
<span class="card-text fs-14 font-weight-400 pl-2 lh-1">2947 reviews</span>
</div>
</div>
</div>
</div>Product 02
<div style="max-width: 330px;">
<div class="card border-0 product">
<div class="position-relative">
<img src="../../images/product-02.jpg" alt="Product 02">
<div class="card-img-overlay d-flex p-3 flex-column">
<div>
<span class="badge badge-primary">-20%</span>
</div>
<div class="w-100 content-change-horizontal d-flex justify-content-center mt-auto">
<a href="#" data-toggle="tooltip" data-placement="top" title="View products"
class="add-to-cart d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle mr-2">
<svg class="icon icon-shopping-bag-open-light fs-24">
<use xlink:href="#icon-shopping-bag-open-light"></use>
</svg>
</a>
<a href="#" data-toggle="tooltip" data-placement="top" title="Quick view"
class="preview d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle mr-2">
<svg class="icon icon-eye-light fs-24">
<use xlink:href="#icon-eye-light"></use>
</svg>
</a>
<a href="#" data-toggle="tooltip" data-placement="top" title="Add to wishlist"
class="add-to-wishlist d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle mr-2">
<svg class="icon icon-star-light fs-24">
<use xlink:href="#icon-star-light"></use>
</svg>
</a>
<a href="#" data-toggle="tooltip" data-placement="top" title="Compare"
class="add-to-compare d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle">
<svg class="icon icon-arrows-left-right-light fs-24">
<use xlink:href="#icon-arrows-left-right-light"></use>
</svg>
</a>
</div>
</div>
</div>
<div class="card-body pt-4 text-center px-0">
<p class="card-text font-weight-bold fs-16 mb-1 text-secondary">
<span class="fs-13 font-weight-500 text-decoration-through text-body pr-1">$39.00</span>
<span>$29.00</span>
</p>
<h2 class="card-title fs-15 font-weight-500 mb-2"><a href="#">Bio-shroom Rejuvenating Serum</a></h2>
<div class="d-flex align-items-center justify-content-center flex-wrap">
<ul class="list-inline mb-0 lh-1">
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
</ul>
<span class="card-text fs-14 font-weight-400 pl-2 lh-1">2947 reviews</span>
</div>
</div>
</div>
</div>Product 03
<div style="max-width: 330px;">
<div class="card border-0 product">
<div class="position-relative">
<img src="../../images/product-10.jpg" alt="Product 10">
<div class="card-img-overlay d-flex p-3 flex-column">
<div class="mb-auto d-flex justify-content-center">
<div>
<span class="badge badge-primary">-20%</span>
</div>
<div class="w-100 content-change-vertical">
<a href="#" data-toggle="tooltip" data-placement="left" title="Add to wishlist"
class="add-to-wishlist ml-auto d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-40px h-40px rounded-circle mb-2">
<svg class="icon icon-star-light fs-20">
<use xlink:href="#icon-star-light"></use>
</svg>
</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Compare"
class="add-to-compare ml-auto d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-40px h-40px rounded-circle mb-2">
<svg class="icon icon-arrows-left-right-light fs-20">
<use xlink:href="#icon-arrows-left-right-light"></use>
</svg>
</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Quick view"
class="preview ml-auto d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-40px h-40px rounded-circle mb-2">
<svg class="icon icon-eye-light fs-20">
<use xlink:href="#icon-eye-light"></use>
</svg>
</a>
</div>
</div>
<div class="text-center">
<a href="#" class="btn btn-secondary lh-12">Add To Bag</a>
</div>
</div>
</div>
<div class="card-body pt-4 text-center px-0">
<p class="card-text font-weight-bold fs-16 mb-1 text-secondary">
<span class="fs-13 font-weight-500 text-decoration-through text-body pr-1">$39.00</span>
<span>$29.00</span>
</p>
<h2 class="card-title fs-15 font-weight-500 mb-2"><a href="#">Facial cleanser</a></h2>
<div class="d-flex align-items-center justify-content-center flex-wrap">
<ul class="list-inline mb-0 lh-1">
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
</ul>
<span class="card-text fs-14 font-weight-400 pl-2 lh-1">2947 reviews</span>
</div>
</div>
</div>
</div>Product 04
$39.00 $29.00
Coffee Bean Caffeine Eye Cream
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
<div class="media flex-column flex-lg-row">
<a href="#" class="position-relative mw-lg-258">
<img src="../../images/product-08.jpg" alt="Product 08">
<div class="card-img-overlay p-3">
<span class="badge badge-primary">-20%</span>
</div>
</a>
<div class="media-body ml-lg-6 mt-4">
<p class="card-text font-weight-bold fs-16 mb-1 text-secondary">
<span class="fs-15 font-weight-500 text-decoration-through text-body pr-1">$39.00</span>
<span class="fs-18 font-weight-bold">$29.00</span>
</p>
<h2 class="card-title fs-24 mb-2"><a href="#">Coffee Bean Caffeine Eye Cream</a></h2>
<div class="d-flex align-items-center mb-2">
<ul class="list-inline mb-0 lh-1">
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item fs-12 text-primary mr-0"><i class="fas fa-star"></i></li>
</ul>
<span class="card-text fs-14 font-weight-400 pl-2 lh-1">2947 reviews</span>
</div>
<p class="mb-7 mr-xl-8">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
<div class ="d-flex align-items-center flex-wrap flex-column flex-sm-row">
<div class="mr-sm-4">
<a href="#" class="btn btn-secondary px-7">Add to card</a>
</div>
<div class="d-flex mt-sm-0 mt-6">
<a href="#" data-toggle="tooltip" data-placement="top" title="Add to wishlist"
class="add-to-wishlist d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle mr-2">
<svg class="icon icon-heart-light fs-24">
<use xlink:href="#icon-heart-light"></use>
</svg>
</a>
<a href="#" data-toggle="tooltip" data-placement="top" title="Quick view"
class="preview d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle mr-2">
<svg class="icon icon-eye-light fs-24">
<use xlink:href="#icon-eye-light"></use>
</svg>
</a>
<a href="#" data-toggle="tooltip" data-placement="top" title="Compare"
class="add-to-compare d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle">
<svg class="icon icon-arrows-left-right-light fs-24">
<use xlink:href="#icon-arrows-left-right-light"></use>
</svg>
</a>
</div>
</div>
</div>
</div>Product 05
Facial cleanser
$29.00
<div style="max-width: 370px; background-color: #F8F8F8">
<div class="card border-0 product bg-transparent">
<div class="position-relative">
<img src="../../images/product-10.jpg" alt="Product 10">
<div class="card-img-overlay d-flex p-3 flex-column">
<div class="mb-auto d-flex justify-content-center">
<div>
<span class="badge badge-primary">-20%</span>
</div>
<div class="my-auto w-100 content-change-vertical">
<a href="#" data-toggle="tooltip" data-placement="left" title="View products"
class="add-to-cart ml-auto d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle mb-2">
<svg class="icon icon-shopping-bag-open-light fs-24">
<use xlink:href="#icon-shopping-bag-open-light"></use>
</svg>
</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Quick view"
class="preview ml-auto d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle mb-2">
<svg class="icon icon-eye-light fs-24">
<use xlink:href="#icon-eye-light"></use>
</svg>
</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Add to wishlist"
class="add-to-wishlist ml-auto d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle mb-2">
<svg class="icon icon-star-light fs-24">
<use xlink:href="#icon-star-light"></use>
</svg>
</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Compare"
class="add-to-compare ml-auto d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle">
<svg class="icon icon-arrows-left-right-light fs-24">
<use xlink:href="#icon-arrows-left-right-light"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="card-body pt-4 text-center px-0">
<h2 class="card-title fs-18 font-weight-500 mb-0"><a href="#">Facial cleanser</a></h2>
<p class="card-text font-weight-bold fs-16 mb-1 text-secondary">
<span>$29.00</span>
</p>
</div>
</div>
</div>