
<!-- Product Card -->
<div class="product-card mx-auto">
<div class="product-head d-flex justify-content-between align-items-center">
<span class="badge badge-danger">Sale</span>
<div class="rating-stars">
<i class="fe-icon-star active"></i>
<i class="fe-icon-star active"></i>
<i class="fe-icon-star active"></i>
<i class="fe-icon-star active"></i>
<i class="fe-icon-star"></i>
</div>
</div>
<a class="product-thumb" href="#">
<img src="path-to-image" alt="Product Thumbnail"/>
</a>
<div class="product-card-body">
<a class="product-meta" href="#">Smart home</a>
<h5 class="product-title">
<a href="#">Amazon Echo Dot (2nd Generation)</a>
</h5>
<span class="product-price">
<del>$62.00</del>$49.99
</span>
</div>
<div class="product-buttons-wrap">
<div class="product-buttons">
<div class="product-button">
<a href="#" data-toast data-toast-position="topRight" data-toast-type="info" data-toast-icon="fe-icon-help-circle" data-toast-title="Product" data-toast-message="added to your wishlist!">
<i class="fe-icon-heart"></i>
</a>
</div>
<div class="product-button">
<a href="#" data-toast data-toast-position="topRight" data-toast-type="info" data-toast-icon="fe-icon-help-circle" data-toast-title="Product" data-toast-message="added to comparison table!">
<i class="fe-icon-repeat"></i>
</a>
</div>
<div class="product-button">
<a href="#" data-toast data-toast-position="topRight" data-toast-type="success" data-toast-icon="fe-icon-check-circle" data-toast-title="Product" data-toast-message="added to cart successfuly!">
<i class="fe-icon-shopping-cart"></i>
</a>
</div>
</div>
</div>
</div>
//- Product Card
.product-card.mx-auto
.product-head.d-flex.justify-content-between.align-items-center
span.badge.badge-danger Sale
+rating-stars(4)
a(href="#").product-thumb
+image("path-to-image", "Product Thumbnail")
.product-card-body
a(href="#").product-meta Smart home
h5.product-title: a(href="#") Amazon Echo Dot (2nd Generation)
span.product-price
del $62.00
| $49.99
.product-buttons-wrap
.product-buttons
.product-button
a(href="#" data-toast data-toast-position="topRight" data-toast-type="info" data-toast-icon="fe-icon-help-circle" data-toast-title="Product" data-toast-message="added to your wishlist!"): i.fe-icon-heart
.product-button
a(href="#" data-toast data-toast-position="topRight" data-toast-type="info" data-toast-icon="fe-icon-help-circle" data-toast-title="Product" data-toast-message="added to comparison table!"): i.fe-icon-repeat
.product-button
a(href="#" data-toast data-toast-position="topRight" data-toast-type="success" data-toast-icon="fe-icon-check-circle" data-toast-title="Product" data-toast-message="added to cart successfuly!"): i.fe-icon-shopping-cart
<!-- Product Category Card -->
<a class="product-category-card mx-auto" href="#">
<div class="product-category-card-thumb">
<div class="main-img">
<img src="path-to-image" alt="Shop Category"/>
</div>
<div class="thumblist">
<img src="path-to-image" alt="Shop Category"/>
<img src="path-to-image" alt="Shop Category"/>
</div>
</div>
<div class="product-category-card-body">
<div class="product-category-card-meta">Starting from $127.00</div>
<h5 class="product-category-card-title">TV, Video & Audio</h5>
</div>
</a>
//- Product Category Card
a(href="#").product-category-card.mx-auto
.product-category-card-thumb
.main-img
+image("path-to-image", "Shop Category")
.thumblist
+image("path-to-image", "Shop Category")
+image("path-to-image", "Shop Category")
.product-category-card-body
.product-category-card-meta Starting from $127.00
h5.product-category-card-title TV, Video & Audio
<!-- Promo Banner -->
<a class="alert alert-secondary alert-dismissible fade show" href="#" style="background-image: url(path-to-background-image);">
<span class="alert-close" data-dismiss="alert"></span>
<div class="d-flex flex-wrap flex-md-nowrap justify-content-between align-items-center overflow-hidden">
<div class="mx-auto mx-md-0 px-3 pb-2 text-center text-md-left text-sm-nowrap">
<span class="d-block text-lg text-thin mb-2">Limited Time Deals</span>
<h4 class="text-gray-dark pb-1">Surface Pro 4</h4>
<div class="countdown countdown-style-1 text-lg mb-1" data-date-time="10/10/2020 12:00" data-labels=&'{"label-day": "Days", "label-hour": "Hours", "label-minute": "Mins", "label-second": "Secs"}'></div>
<p class="d-inline-block bg-gradient text-white px-2 py-1">Shop Now <i class="fe-icon-chevron-right d-inline-block align-middle"></i></p>
</div>
<img class="d-block mx-auto mx-md-0" alt="Surface Pro 4" src="path-to-image">
</div>
</a>
//- Promo Banner
a(href="#" style="background-image: url(path-to-background-image);").alert.alert-secondary.alert-dismissible.fade.show
span(data-dismiss="alert").close
.d-flex.flex-wrap.flex-md-nowrap.justify-content-between.align-items-center.overflow-hidden
div.mx-auto.mx-md-0.px-3.pb-2.text-center.text-md-left.text-sm-nowrap
span.d-block.text-lg.text-thin.mb-2 Limited Time Deals
h4.text-gray-dark.pb-1 Surface Pro 4
.countdown.countdown-style-1.text-lg(data-date-time="10/10/2020 12:00" data-labels='{"label-day": "Days", "label-hour": "Hours", "label-minute": "Mins", "label-second": "Secs"}').mb-1
p.d-inline-block.bg-gradient.text-white.px-2.py-1
| Shop Now
i.fe-icon-chevron-right.d-inline-block.align-middle
img(src='path-to-image' alt='Surface Pro 4').d-block.mx-auto.mx-md-0