PhilBranding Phillip Mudavanhu UX Designer Logo Designer Buy now

Shop components

Components that are related to the e-commerce section of the website.

Around component

Product card

<!-- Product card -->
<div class="card card-product card-hover">
  <span class="badge badge-floating badge-pill badge-danger">Sale</span>
  <a class="card-img-top" href="#">
    <img src="path-to-image" alt="Product thumbnail"/>
  </a>
  <div class="card-body">
    <a class="meta-link font-size-xs mb-1" href="#">Electronics</a>
    <h3 class="font-size-md font-weight-medium mb-2">
      <a class="meta-link" href="#">Wireless Headphones</a>
    </h3>
    <del class="font-size-sm text-muted mr-1">$165.00</del>
    <span class="text-heading font-weight-semibold">$139.00</span>
  </div>
  <div class="card-footer">
    <div class="star-rating">
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star"></i>
    </div>
    <div class="d-flex align-items-center">
      <a class="btn-wishlist" href="#">
        <i class="fe-heart"></i>
        <span class="btn-tooltip">Wishlist</span>
      </a>
      <span class="btn-divider"></span>
      <a class="btn-addtocart" href="#">
        <i class="fe-shopping-cart"></i>
        <span class="btn-tooltip">To Cart</span>
      </a>
    </div>
  </div>
</div>
// Product card
.card.card-product.card-hover
  span.badge.badge-floating.badge-pill.badge-danger Sale
  a(href="#").card-img-top
    +image("path-to-image", "Product thumbnail")
  .card-body
    a(href="#").meta-link.font-size-xs.mb-1
      | Electronics
    h3.font-size-md.font-weight-medium.mb-2
      a(href="#").meta-link
        | Wireless Headphones
    del.font-size-sm.text-muted.mr-1 $165.00
    span.text-heading.font-weight-semibold $139.00
  .card-footer
    +star-rating(4)
    .d-flex.align-items-center
      a(href="#").btn-wishlist
        i.fe-heart
        span.btn-tooltip Wishlist
      span.btn-divider
      a(href="#").btn-addtocart
        i.fe-shopping-cart
        span.btn-tooltip To Cart

Wishlist item

<!-- Wishlist item -->
<div class="card card-product card-hover">
  <a class="btn-remove" href="#">
    <i class="fe-trash-2"></i>
    <span class="btn-tooltip">Remove</span>
  </a>
  <a class="card-img-top" href="#">
    <img src="path-to-image" alt="Product thumbnail"/>
  </a>
  <div class="card-body">
    <a class="meta-link font-size-xs mb-1" href="#">Women's shoes</a>
    <h3 class="font-size-md font-weight-medium mb-2">
      <a class="meta-link" href="#">Women Colorblock Sneakers</a>
    </h3>
    <span class="text-heading font-weight-semibold">$154.00</span>
  </div>
  <div class="card-footer">
    <div class="star-rating">
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star-filled active"></i>
      <i class="sr-star fe-star"></i>
      <i class="sr-star fe-star"></i>
    </div>
    <a class="btn-addtocart" href="#">
      <i class="fe-shopping-cart"></i>
      <span class="btn-tooltip">To Cart</span>
    </a>
  </div>
</div>
// Wishlist item
.card.card-product.card-hover
  a(href="#").btn-remove
    i.fe-trash-2
    span.btn-tooltip Remove
  a(href="#").card-img-top
    +image("path-to-image", "Product thumbnail")
  .card-body
    a(href="#").meta-link.font-size-xs.mb-1
      | Women's shoes
    h3.font-size-md.font-weight-medium.mb-2
      a(href="#").meta-link
        | Women Colorblock Sneakers
    span.text-heading.font-weight-semibold $154.00
  .card-footer
    +star-rating(3)
    a(href="#").btn-addtocart
      i.fe-shopping-cart
      span.btn-tooltip To Cart

Category card

<!-- Category card -->
<div class="card card-category box-shadow">
  <span class="badge badge-lg badge-floating badge-floating-right badge-success">
    From $8.99
  </span>
  <img src="path-to-image" class="card-img-top" alt="Clothing"/>
  <div class="card-body">
    <h4 class="card-title">Clothing</h4>
  </div>
</div>
// Category card
a(href="#").card.card-category.box-shadow
  span.badge.badge-lg.badge-floating.badge-floating-right.badge-success
    | From $8.99
  +image("path-to-image", "Clothing").card-img-top
  .card-body
    h4.card-title Clothing

Promo banner

Virtual Reality

Gadgets from top brands at discounted price

Limited time offer
0Days
0Hours
0Mins
Get one now
Promo banner 
<!-- Promo banner with coundown -->
<div class="bg-secondary rounded-lg pt-5 px-3 pl-sm-5 pr-sm-2">
  <div class="d-sm-flex align-items-end text-center text-sm-left pl-2">
    <div class="mr-sm-n6 pb-5">
      <h2 class="h1 text-sm-nowrap">Virtual Reality</h2>
      <p class="pb-2 mx-auto mx-sm-0" style="max-width: 14rem;">
        Gadgets from top brands at discounted price
      </p>
      <div class="d-inline-block bg-faded-danger text-danger font-size-sm font-weight-medium rounded-sm px-3 py-2">
        Limited time offer
      </div>
      <div class="cs-countdown pt-3 h4 justify-content-center justify-content-sm-start" data-countdown="10/01/2021 07:00:00 PM">
        <div class="cs-countdown-days">
          <span class="cs-countdown-value">0</span>
          <span class="cs-countdown-label font-size-xs text-muted">Days</span>
        </div>
        <div class="cs-countdown-hours">
          <span class="cs-countdown-value">0</span>
          <span class="cs-countdown-label font-size-xs text-muted">Hours</span>
        </div>
        <div class="cs-countdown-minutes">
          <span class="cs-countdown-value">0</span>
          <span class="cs-countdown-label font-size-xs text-muted">Mins</span>
        </div>
      </div>
      <a class="btn btn-primary" href="#">Get one now</a>
    </div>
    <div><img src="path-to-image" alt="Promo banner"/>
    </div>
  </div>
</div>
// Promo banner with coundown
.bg-secondary.rounded-lg.pt-5.px-3.pl-sm-5.pr-sm-2
  .d-sm-flex.align-items-end.text-center.text-sm-left.pl-2
    .mr-sm-n6.pb-5
      h2.h1.text-sm-nowrap Virtual Reality
      p.pb-2.mx-auto.mx-sm-0(style="max-width: 14rem;") Gadgets from top brands at discounted price
      .d-inline-block.bg-faded-danger.text-danger.font-size-sm.font-weight-medium.rounded-sm.px-3.py-2
        | Limited time offer
      .cs-countdown.pt-3.h4.justify-content-center.justify-content-sm-start(data-countdown="10/01/2021 07:00:00 PM")
        .cs-countdown-days
          span.cs-countdown-value 0
          span.cs-countdown-label.font-size-xs.text-muted Days
        .cs-countdown-hours
          span.cs-countdown-value 0
          span.cs-countdown-label.font-size-xs.text-muted Hours
        .cs-countdown-minutes
          span.cs-countdown-value 0
          span.cs-countdown-label.font-size-xs.text-muted Mins
      a(href="#").btn.btn-primary
        | Get one now
    div
      +image("path-to-image", "Promo banner")

Active filters

<!-- Active filter -->
<a href="#" class="active-filter">
  Active filter
</a>
// Active filter
a(href="#").active-filter
  | Active filter
Top