Widgets

Collection of tiny components to use inside sidebar area.

Around component

Categories

<!-- Widget: Collapsible categories -->
<div class="widget widget-categories">
  <h3 class="widget-title">Collapsible categories</h3>
  <ul id="categories">
    <li>
      <a class="widget-link" href="#clothing" data-bs-toggle="collapse">
        Clothing
        <small class="text-muted ps-1 ms-2">235</small>
      </a>
      <ul class="collapse show" id="clothing" data-bs-parent="#categories">
        <li><a class="widget-link" href="#">Blazers & Suits</a></li>
        <li><a class="widget-link" href="#">Cardigans</a></li>
        <li><a class="widget-link" href="#">Dresses</a></li>
      </ul>
    </li>
    <li>
      <a class="widget-link collapsed" href="#shoes" data-bs-toggle="collapse">
        Shoes
        <small class="text-muted ps-1 ms-2">210</small>
      </a>
      <ul class="collapse" id="shoes" data-bs-parent="#categories">
        <li><a class="widget-link" href="#">Athletic shoes</a></li>
        <li><a class="widget-link" href="#">Balerinas & Flats</a></li>
        <li><a class="widget-link" href="#">Boots</a></li>
      </ul>
    </li>
    <li>
      <a class="widget-link collapsed" href="#electronics" data-bs-toggle="collapse">
        Electronics
        <small class="text-muted ps-1 ms-2">197</small>
      </a>
      <ul class="collapse" id="electronics" data-bs-parent="#categories">
        <li><a class="widget-link" href="#">Computers & Accessories</a></li>
        <li><a class="widget-link" href="#">TV, Video & Audio</a></li>
        <li><a class="widget-link" href="#">Smartphones & Tablets</a></li>
      </ul>
    </li>
    <li>
      <a class="widget-link collapsed" href="#accessories" data-bs-toggle="collapse">
        Accessories
        <small class="text-muted ps-1 ms-2">124</small>
      </a>
      <ul class="collapse" id="accessories" data-bs-parent="#categories">
        <li><a class="widget-link" href="#">Bags</a></li>
        <li><a class="widget-link" href="#">Belts</a></li>
        <li><a class="widget-link" href="#">Hats</a></li>
      </ul>
    </li>
  </ul>
</div>

<!-- Widget: Static categories -->
<div class="widget widget-categories">
  <h3 class="widget-title">Static categories</h3>
  <ul>
    <li>
      <a class="widget-link" href="#">
        Clothing
        <small class="text-muted ps-1 ms-2">235</small>
      </a>
    </li>
    <li>
      <a class="widget-link" href="#">
        Shoes
        <small class="text-muted ps-1 ms-2">210</small>
      </a>
    </li>
    <li>
      <a class="widget-link" href="#">
        Electronics
        <small class="text-muted ps-1 ms-2">197</small>
      </a>
      <ul>
        <li>
          <a class="widget-link" href="#">Computers & Accessories</a>
          <ul>
            <li><a class="widget-link" href="#">Laptops & Tablets</a></li>
            <li><a class="widget-link" href="#">Desktop Computers</a></li>
            <li><a class="widget-link" href="#">Computer Accessories</a></li>
          </ul>
        </li>
        <li><a class="widget-link" href="#">TV, Video & Audio</a></li>
        <li><a class="widget-link" href="#">Cameras, Photo & Video</a></li>
        <li>
          <a class="widget-link" href="#">Headphones</a>
          <ul>
            <li><a class="widget-link" href="#">Earbuds</a></li>
            <li><a class="widget-link" href="#">Over-Ear</a></li>
            <li><a class="widget-link" href="#">Bluetooth</a></li>
          </ul>
        </li>
        <li><a class="widget-link" href="#">Wearable Electronics</a></li>
        <li><a class="widget-link" href="#">Printers & Ink</a></li>
      </ul>
    </li>
    <li>
      <a class="widget-link" href="#">
        Accessories
        <small class="text-muted ps-1 ms-2">124</small>
      </a>
    </li>
    <li>
      <a class="widget-link" href="#">
        Entertainment
        <small class="text-muted ps-1 ms-2">86</small>
      </a>
    </li>
  </ul>
</div>
// Widget: Collapsible categories
.widget.widget-categories
  h3.widget-title Collapsible categories
  ul#categories
    li
      a(href="#clothing", data-bs-toggle="collapse").widget-link
        | Clothing
        small.text-muted.ps-1.ms-2 235
      ul#clothing.collapse.show(data-bs-parent="#categories")
        li
          a.widget-link(href="#") Blazers &amp; Suits
        li
          a.widget-link(href="#") Cardigans
        li
          a.widget-link(href="#") Dresses
    li
      a(href="#shoes", data-bs-toggle="collapse").widget-link.collapsed
        | Shoes
        small.text-muted.ps-1.ms-2 210
      ul#shoes.collapse(data-bs-parent="#categories")
        li
          a.widget-link(href="#") Athletic shoes
        li
          a.widget-link(href="#") Balerinas &amp; Flats
        li
          a.widget-link(href="#") Boots
    li
      a(href="#electronics", data-bs-toggle="collapse").widget-link.collapsed
        | Electronics
        small.text-muted.ps-1.ms-2 197
      ul#electronics.collapse(data-bs-parent="#categories")
        li
          a.widget-link(href="#") Computers &amp; Accessories
        li
          a.widget-link(href="#") TV, Video &amp; Audio
        li
          a.widget-link(href="#") Smartphones &amp; Tablets
    li
      a(href="#accessories", data-bs-toggle="collapse").widget-link.collapsed
        | Accessories
        small.text-muted.ps-1.ms-2 124
      ul#accessories.collapse(data-bs-parent="#categories")
        li
          a.widget-link(href="#") Bags
        li
          a.widget-link(href="#") Belts
        li
          a.widget-link(href="#") Hats

// Widget: Static categories
.widget.widget-categories
  h3.widget-title Static categories
  ul
    li
      a(href="#").widget-link
        | Clothing
        small.text-muted.ps-1.ms-2 235
    li
      a(href="#").widget-link
        | Shoes
        small.text-muted.ps-1.ms-2 210
    li
      a(href="#").widget-link
        | Electronics
        small.text-muted.ps-1.ms-2 197
      ul
        li
          a.widget-link(href="#") Computers &amp; Accessories
          ul
            li
              a.widget-link(href="#") Laptops &amp; Tablets
            li
              a.widget-link(href="#") Desktop Computers
            li
              a.widget-link(href="#") Computer Accessories
        li
          a.widget-link(href="#") TV, Video &amp; Audio
        li
          a.widget-link(href="#") Cameras, Photo &amp; Video
        li
          a.widget-link(href="#") Headphones
          ul
            li
              a.widget-link(href="#") Earbuds
            li
              a.widget-link(href="#") Over-Ear
            li
              a.widget-link(href="#") Bluetooth
        li
          a.widget-link(href="#") Wearable Electronics
        li
          a.widget-link(href="#") Printers &amp; Ink
    li
      a.widget-link(href="#")
        | Accessories
        small.text-muted.ps-1.ms-2 124
    li
      a.widget-link(href="#")
        | Entertainment
        small.text-muted.ps-1.ms-2 86

Range slider

Price range

$
$
<!-- Widget: Range slider -->
<div class="widget">
  <h3 class="widget-title">Price range</h3>
  <div class="range-slider" data-start-min="250" data-start-max="680" data-min="0" data-max="1000" data-step="1">
    <div class="range-slider-ui"></div>
    <div class="d-flex">
      <div class="w-50 pe-2 me-2">
        <div class="input-group input-group-sm">
          <span class="input-group-text">$</span>
          <input class="form-control range-slider-value-min" type="text">
        </div>
      </div>
      <div class="w-50 ps-2">
        <div class="input-group input-group-sm">
          <span class="input-group-text">$</span>
          <input class="form-control range-slider-value-max" type="text">
        </div>
      </div>
    </div>
  </div>
</div>
// Widget: Range slider
.widget
  h3.widget-title Price range
  .range-slider(data-start-min="250", data-start-max="680", data-min="0", data-max="1000", data-step="1")
    .range-slider-ui
    .d-flex
      .w-50.pe-2.me-2
        .input-group.input-group-sm
          span.input-group-text $
          input(type="text").form-control.range-slider-value-min
      .w-50.ps-2
        .input-group.input-group-sm
          span.input-group-text $
          input(type="text").form-control.range-slider-value-max

Shopping cart

<!-- Widget: Shopping cart -->
<div class="widget">
  <h3 class="widget-title pb-1">Your cart</h3>

  <!-- Item -->
  <div class="d-flex align-items-center mb-4">
    <a class="d-block flex-shrink-0" href="#">
      <img class="rounded" width="60" src="path-to-image" alt="Product"/>
    </a>
    <div class="w-100 ps-2 ms-1">
      <div class="d-flex align-items-center justify-content-between">
        <div class="me-3">
          <h4 class="nav-heading fs-md mb-1">
            <a class="fw-medium" href="#">Smart Watch Series 5</a>
          </h4>
          <div class="d-flex align-items-center fs-sm">
            <span class="me-2">$364.99</span>
            <span class="me-2">x</span>
            <input class="form-control form-control-sm px-2" type="number" style="max-width: 3.5rem;" value="1">
          </div>
        </div>
        <div class="ps-3 border-start">
          <a class="d-block text-danger text-decoration-none fs-xl" href="#" data-bs-toggle="tooltip" title="Remove">
            <i class="ai-x-circle"></i>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="d-flex align-items-center mb-4">
    <a class="d-block flex-shrink-0" href="#">
      <img class="rounded" width="60" src="path-to-image" alt="Product"/>
    </a>
    <div class="w-100 ps-2 ms-1">
      <div class="d-flex align-items-center justify-content-between">
        <div class="me-3">
          <h4 class="nav-heading fs-md mb-1">
            <a class="fw-medium" href="#">Running Sneakers, Collection</a>
          </h4>
          <div class="d-flex align-items-center fs-sm">
            <span class="me-2">$145.00</span>
            <span class="me-2">x</span>
            <input class="form-control form-control-sm px-2" type="number" style="max-width: 3.5rem;" value="1">
          </div>
        </div>
        <div class="ps-3 border-start">
          <a class="d-block text-danger text-decoration-none fs-xl" href="#" data-bs-toggle="tooltip" title="Remove">
            <i class="ai-x-circle"></i>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Totals -->
  <hr class="mb-4"/>
  <div class="d-flex justify-content-between mb-4">
    <span>Total:</span>
    <span class="h6 mb-0">$776.99</span>
  </div>
  <a href="#" class="btn btn-primary btn-sm d-block w-100">
    <i class="ai-credit-card fs-base me-2"></i>
    Checkout
  </a>
</div>
// Widget: Shopping cart
.widget
  h3.widget-title.pb-1 Your cart

  // Item
  .d-flex.align-items-center.mb-4
    a(href="#").d-block.flex-shrink-0
      img(src="path-to-image", alt="Product", width="60").rounded
    .w-100.ps-2.ms-1
      .d-flex.align-items-center.justify-content-between
        .me-3
          h4.nav-heading.fs-md.mb-1
            a(href="#").fw-medium
              | Smart Watch Series 5
          .d-flex.align-items-center.fs-sm
            span.me-2 $364.99
            span.me-2 x
            input(type="number", style="max-width: 3.5rem;", value="1").form-control.form-control-sm.px-2
        .ps-3.border-start
          a(href="#", data-bs-toggle="tooltip", title="Remove").d-block.text-danger.text-decoration-none.fs-xl
            i.ai-x-circle

  // Item
  .d-flex.align-items-center.mb-4
    a(href="#").d-block.flex-shrink-0
      img(src="path-to-image", alt="Product", width="60").rounded
    .w-100.ps-2.ms-1
      .d-flex.align-items-center.justify-content-between
        .me-3
          h4.nav-heading.fs-md.mb-1
            a(href="#").fw-medium
              | Running Sneakers, Collection
          .d-flex.align-items-center.fs-sm
            span.me-2 $145.00
            span.me-2 x
            input(type="number", style="max-width: 3.5rem;", value="1").form-control.form-control-sm.px-2
        .ps-3.border-start
          a(href="#", data-bs-toggle="tooltip", title="Remove").d-block.text-danger.text-decoration-none.fs-xl
            i.ai-x-circle
  
  // Totals
  hr.mb-4
  .d-flex.justify-content-between.mb-4
    span Total:
    span.h6.mb-0 $776.99
  a(href="#").btn.btn-primary.btn-sm.d-block.w-100
    i.ai-credit-card.fs-base.me-2
    | Checkout

Tag cloud

<!-- Tag link -->
<a href="#" class="btn-tag">#business</a>
// Tag link
a(href="#").btn-tag
  | #business

Filter (checkboxes)

Brand

<!-- Widget: Filter (checkboxes) -->
<div class="widget">
  <h3 class="widget-title">Brand</h3>
  <div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" id="adidas" checked>
    <label class="form-check-label text-nav" for="adidas">
      Adidas
      <span class="fs-xs text-muted ms-2">425</span>
    </label>
  </div>
  <div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" id="bilabong">
    <label class="form-check-label text-nav" for="bilabong">
      Bilabong
      <span class="fs-xs text-muted ms-2">27</span>
    </label>
  </div>
  <div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" id="klein">
    <label class="form-check-label text-nav" for="klein">
      Calvin Klein
      <span class="fs-xs text-muted ms-2">365</span>
    </label>
  </div>
</div>
// Widget: Filter (checkboxes)
.widget
  h3.widget-title Brand
  .form-check.mb-2
    input(type="checkbox", id="adidas", checked).form-check-input
    label(for="adidas").form-check-label.text-nav
      | Adidas
      span.fs-xs.text-muted.ms-2 425
  .form-check.mb-2
    input(type="checkbox", id="bilabong").form-check-input
    label(for="bilabong").form-check-label.text-nav
      | Bilabong
      span.fs-xs.text-muted.ms-2 27
  .form-check.mb-2
    input(type="checkbox", id="klein").form-check-input
    label(for="klein").form-check-label.text-nav
      | Calvin Klein
      span.fs-xs.text-muted.ms-2 365

Subscription (MailChimp Ajax)

Subscribe

*Subscribe to our newsletter to receive early discount offers, updates and new products info.
<!-- Widget: Subscription (MailChimp Ajax)
        Instructions how to get MailChimp action link:
        1. Log in to your MailChimp Dashboard / Audience / Manage Audience / Signup forms / Embedded forms
        2. In the provided code find form action link and copy it
        3. Paste it to the form action attribute below
        4. Also in the form code provided by MailChimp find antispam input and copy it name attribute contents
        5. Paste what you have copied from name attribute to the name attribute of input with class "subscription-form-antispam"
-->
<div class="widget">
  <h3 class="widget-title">Subscribe</h3>
  <form class="subscription-form validate" action="mailchimp-embedded-form-atcion-link" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
    <div class="input-group flex-nowrap">
      <i class="ai-mail position-absolute top-50 translate-middle-y text-muted fs-base ms-3"></i>
      <input class="form-control rounded-start" type="email" name="EMAIL" placeholder="Your email" required>
      <button class="btn btn-primary" type="submit" name="subscribe">Subscribe*</button>
    </div>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true">
      <input type="text" class="subscription-form-antispam" name="mailchimp-embedded-form-antispam-name-attribute" tabindex="-1">
    </div>
    <div class="form-text">*Subscribe to our newsletter to receive early discount offers, updates and new products info.</div>
    <div class="subscription-status"></div>
  </form>
</div>
// Widget: Subscription (MailChimp Ajax)
// Instructions how to get MailChimp action link:
// 1. Log in to your MailChimp Dashboard / Audience / Manage Audience / Signup forms / Embedded forms
// 2. In the provided code find form action link and copy it
// 3. Paste it to the form action attribute below
// 4. Also in the form code provided by MailChimp find antispam input and copy it name attribute contents
// 5. Paste what you have copied from name attribute to the name attribute of input with class "subscription-form-antispam"
form(action="mailchimp-embedded-form-atcion-link", method="post", name="mc-embedded-subscribe-form", target="_blank", novalidate).subscription-form.validate
  .input-group.flex-nowrap
    i.ai-mail.position-absolute.top-50.translate-middle-y.text-muted.fs-base.ms-3
    input(type="email", name="EMAIL", placeholder="Your email", required).form-control.rounded-start
    button(type="submit", name="subscribe").btn.btn-primary Subscribe*
  // real people should not fill this in and expect good things - do not remove this or risk form bot signups
  div(style="position: absolute; left: -5000px;" aria-hidden="true")
    input(type="text", name="mailchimp-embedded-form-antispam-name-attribute", tabindex="-1").subscription-form-antispam
  .form-text *Subscribe to our newsletter to receive early discount offers, updates and new products info.
  .subscription-status

Contact details

<!-- Widget: Contact details -->
<div class="widget">
  <h3 class="widget-title">Contact details</h3>
  <div class="d-flex pb-3 border-bottom">
    <i class="ai-map-pin fs-lg mt-2 mb-0 text-primary"></i>
    <div class="ps-3">
      <span class="fs-ms text-muted">Find us</span>
      <a class="d-block nav-link-style fs-sm" href="#">769, Industrial Dr, West Chicago, IL 60185, USA</a>
    </div>
  </div>
  <div class="d-flex pt-2 pb-3 border-bottom">
    <i class="ai-phone fs-lg mt-2 mb-0 text-primary"></i>
    <div class="ps-3">
      <span class="fs-ms text-muted">Call us</span>
      <a class="d-block nav-link-style fs-sm" href="tel:+184725276533">+1 (847) 252 765 33</a>
    </div>
  </div>
  <div class="d-flex pt-2">
    <i class="ai-mail fs-lg mt-2 mb-0 text-primary"></i>
    <div class="ps-3">
      <span class="fs-ms text-muted">Write us</span>
      <a class="d-block nav-link-style fs-sm" href="mailto:email@example.com">email@example.com</a>
    </div>
  </div>
</div>
// Widget: Contact details
.widget
  h3.widget-title Contact details
  .d-flex.pb-3.border-bottom
    i.ai-map-pin.fs-lg.mt-2.mb-0.text-primary
    .ps-3
      span.fs-ms.text-muted Find us
      a(href="#").d-block.nav-link-style.fs-sm
        | 769, Industrial Dr, West Chicago, IL 60185, USA
  .d-flex.pt-2.pb-3.border-bottom
    i.ai-phone.fs-lg.mt-2.mb-0.text-primary
    .ps-3
      span.fs-ms.text-muted Call us
      a(href="tel:+184725276533").d-block.nav-link-style.fs-sm
        | +1 (847) 252 765 33
  .d-flex.pt-2
    i.ai-mail.fs-lg.mt-2.mb-0.text-primary
    .ps-3
      span.fs-ms.text-muted Write us
      a(href="mailto:email@example.com").d-block.nav-link-style.fs-sm
        | email@example.com
Top