Around 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 rounded-pill rounded-start-0 bg-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 fs-xs mb-1" href="#">Electronics</a>
    <h3 class="fs-md fw-medium mb-2">
      <a class="meta-link" href="#">Wireless Headphones</a>
    </h3>
    <del class="fs-sm text-muted me-1">$165.00</del>
    <span class="text-heading fw-semibold">$139.00</span>
  </div>
  <div class="card-footer">
    <div class="star-rating">
      <i class="sr-star ai-star-filled active"></i>
      <i class="sr-star ai-star-filled active"></i>
      <i class="sr-star ai-star-filled active"></i>
      <i class="sr-star ai-star-filled active"></i>
      <i class="sr-star ai-star"></i>
    </div>
    <div class="d-flex align-items-center">
      <a class="btn-wishlist" href="#">
        <i class="ai-heart"></i>
        <span class="btn-tooltip">Wishlist</span>
      </a>
      <span class="btn-divider"></span>
      <a class="btn-addtocart" href="#">
        <i class="ai-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.rounded-pill.rounded-start-0.bg-danger Sale
  a(href="#").card-img-top
    img(src="path-to-image", alt="Product thumbnail")
  .card-body
    a(href="#").meta-link.fs-xs.mb-1
      | Electronics
    h3.fs-md.fw-medium.mb-2
      a(href="#").meta-link
        | Wireless Headphones
    del.fs-sm.text-muted.me-1 $165.00
    span.text-heading.fw-semibold $139.00
  .card-footer
    +star-rating(4)
    .d-flex.align-items-center
      a(href="#").btn-wishlist
        i.ai-heart
        span.btn-tooltip Wishlist
      span.btn-divider
      a(href="#").btn-addtocart
        i.ai-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="ai-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 fs-xs mb-1" href="#">Women's shoes</a>
    <h3 class="fs-md fw-medium mb-2">
      <a class="meta-link" href="#">Women Colorblock Sneakers</a>
    </h3>
    <span class="text-heading fw-semibold">$154.00</span>
  </div>
  <div class="card-footer">
    <div class="star-rating">
      <i class="sr-star ai-star-filled active"></i>
      <i class="sr-star ai-star-filled active"></i>
      <i class="sr-star ai-star-filled active"></i>
      <i class="sr-star ai-star"></i>
      <i class="sr-star ai-star"></i>
    </div>
    <a class="btn-addtocart" href="#">
      <i class="ai-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.ai-trash-2
    span.btn-tooltip Remove
  a(href="#").card-img-top
    img(src="path-to-image", alt="Product thumbnail")
  .card-body
    a(href="#").meta-link.fs-xs.mb-1
      | Women's shoes
    h3.fs-md.fw-medium.mb-2
      a(href="#").meta-link
        | Women Colorblock Sneakers
    span.text-heading.fw-semibold $154.00
  .card-footer
    +star-rating(3)
    a(href="#").btn-addtocart
      i.ai-shopping-cart
      span.btn-tooltip To Cart

Category card

<!-- Category card -->
<div class="card card-category shadow">
  <span class="badge badge-lg badge-floating badge-floating-end bg-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.shadow
  span.badge.badge-lg.badge-floating.badge-floating-end.bg-success
    | From $8.99
  img(src="path-to-image", alt="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 countdown -->
<div class="bg-secondary rounded-3 pt-5 px-3 ps-sm-5 pe-sm-2">
  <div class="d-sm-flex align-items-end text-center text-sm-start ps-2">
    <div class="me-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 fs-sm fw-medium rounded-1 px-3 py-2">
        Limited time offer
      </div>
      <div class="countdown pt-3 h4 justify-content-center justify-content-sm-start" data-countdown="10/01/2021 07:00:00 PM">
        <div class="countdown-days">
          <span class="countdown-value">0</span>
          <span class="countdown-label fs-xs text-muted">Days</span>
        </div>
        <div class="countdown-hours">
          <span class="countdown-value">0</span>
          <span class="countdown-label fs-xs text-muted">Hours</span>
        </div>
        <div class="countdown-minutes">
          <span class="countdown-value">0</span>
          <span class="countdown-label fs-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 countdown
.bg-secondary.rounded-3.pt-5.px-3.ps-sm-5.pe-sm-2
  .d-sm-flex.align-items-end.text-center.text-sm-start.ps-2
    .me-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.fs-sm.fw-medium.rounded-1.px-3.py-2
        | Limited time offer
      .countdown.pt-3.h4.justify-content-center.justify-content-sm-start(data-countdown="10/01/2021 07:00:00 PM")
        .countdown-days
          span.countdown-value 0
          span.countdown-label.fs-xs.text-muted Days
        .countdown-hours
          span.countdown-value 0
          span.countdown-label.fs-xs.text-muted Hours
        .countdown-minutes
          span.countdown-value 0
          span.countdown-label.fs-xs.text-muted Mins
      a(href="#").btn.btn-primary
        | Get one now
    div
      img(src="path-to-image", alt="Promo banner")

Active filters

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