Shop Components

HTML
Pug

<!-- 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

HTML
Pug

<!-- 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 &amp; 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

HTML
Pug

<!-- 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&nbsp;<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