Widgets

Collection of tiny components to use inside sidebar area.

Around component

Categories

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

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

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

Range slider

Price range

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

Shopping cart

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

  <!-- Item -->
  <div class="media align-items-center mb-4">
    <a class="d-block" href="#">
      <img class="rounded" width="60" src="path-to-image" alt="Product"/>
    </a>
    <div class="media-body pl-2 ml-1">
      <div class="d-flex align-items-center justify-content-between">
        <div class="mr-3">
          <h4 class="nav-heading font-size-md mb-1">
            <a class="font-weight-medium" href="#">Smart Watch Series 5</a>
          </h4>
          <div class="d-flex align-items-center font-size-sm">
            <span class="mr-2">$364.99</span>
            <span class="mr-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="pl-3 border-left">
          <a class="d-block text-danger text-decoration-none font-size-xl" href="#" data-toggle="tooltip" title="Remove">
            <i class="fe-x-circle"></i>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="media align-items-center mb-4">
    <a class="d-block" href="#">
      <img class="rounded" width="60" src="path-to-image" alt="Product"/>
    </a>
    <div class="media-body pl-2 ml-1">
      <div class="d-flex align-items-center justify-content-between">
        <div class="mr-3">
          <h4 class="nav-heading font-size-md mb-1">
            <a class="font-weight-medium" href="#">Running Sneakers, Collection</a>
          </h4>
          <div class="d-flex align-items-center font-size-sm">
            <span class="mr-2">$145.00</span>
            <span class="mr-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="pl-3 border-left">
          <a class="d-block text-danger text-decoration-none font-size-xl" href="#" data-toggle="tooltip" title="Remove">
            <i class="fe-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 btn-block">
    <i class="fe-credit-card font-size-base mr-2"></i>
    Checkout
  </a>
</div>
// Widget: Shopping cart
.cs-widget
  h3.cs-widget-title.pb-1 Your cart

  // Item
  .media.align-items-center.mb-4
    a(href="#").d-block
      +image("path-to-image", "Product")(width="60").rounded
    .media-body.pl-2.ml-1
      .d-flex.align-items-center.justify-content-between
        .mr-3
          h4.nav-heading.font-size-md.mb-1
            a(href="#").font-weight-medium
              | Smart Watch Series 5
          .d-flex.align-items-center.font-size-sm
            span.mr-2 $364.99
            span.mr-2 x
            input(type="number", style="max-width: 3.5rem;", value="1").form-control.form-control-sm.px-2
        .pl-3.border-left
          a(href="#", data-toggle="tooltip", title="Remove").d-block.text-danger.text-decoration-none.font-size-xl
            i.fe-x-circle

  // Item
  .media.align-items-center.mb-4
    a(href="#").d-block
      +image("path-to-image", "Product")(width="60").rounded
    .media-body.pl-2.ml-1
      .d-flex.align-items-center.justify-content-between
        .mr-3
          h4.nav-heading.font-size-md.mb-1
            a(href="#").font-weight-medium
              | Running Sneakers, Collection
          .d-flex.align-items-center.font-size-sm
            span.mr-2 $145.00
            span.mr-2 x
            input(type="number", style="max-width: 3.5rem;", value="1").form-control.form-control-sm.px-2
        .pl-3.border-left
          a(href="#", data-toggle="tooltip", title="Remove").d-block.text-danger.text-decoration-none.font-size-xl
            i.fe-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.btn-block
    i.fe-credit-card.font-size-base.mr-2
    | Checkout

Tag cloud

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

Filter (checkboxes)

Brand

<!-- Widget: Filter (checkboxes) -->
<div class="cs-widget">
  <h3 class="cs-widget-title">Brand</h3>
  <div class="custom-control custom-checkbox mb-2">
    <input class="custom-control-input" type="checkbox" id="adidas" checked>
    <label class="custom-control-label text-nav" for="adidas">
      Adidas
      <span class="font-size-xs text-muted ml-2">425</span>
    </label>
  </div>
  <div class="custom-control custom-checkbox mb-2">
    <input class="custom-control-input" type="checkbox" id="bilabong">
    <label class="custom-control-label text-nav" for="bilabong">
      Bilabong
      <span class="font-size-xs text-muted ml-2">27</span>
    </label>
  </div>
  <div class="custom-control custom-checkbox mb-2">
    <input class="custom-control-input" type="checkbox" id="klein">
    <label class="custom-control-label text-nav" for="klein">
      Calvin Klein
      <span class="font-size-xs text-muted ml-2">365</span>
    </label>
  </div>
</div>
// Widget: Filter (checkboxes)
.cs-widget
  h3.cs-widget-title Brand
  .custom-control.custom-checkbox.mb-2
    input(type="checkbox", id="adidas", checked).custom-control-input
    label(for="adidas").custom-control-label.text-nav
      | Adidas
      span.font-size-xs.text-muted.ml-2 425
  .custom-control.custom-checkbox.mb-2
    input(type="checkbox", id="bilabong").custom-control-input
    label(for="bilabong").custom-control-label.text-nav
      | Bilabong
      span.font-size-xs.text-muted.ml-2 27
  .custom-control.custom-checkbox.mb-2
    input(type="checkbox", id="klein").custom-control-input
    label(for="klein").custom-control-label.text-nav
      | Calvin Klein
      span.font-size-xs.text-muted.ml-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 "cs-subscribe-form-antispam"
-->
<div class="cs-widget">
  <h3 class="cs-widget-title">Subscribe</h3>
  <form class="cs-subscribe-form validate" action="mailchimp-embedded-form-atcion-link" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
    <div class="input-group input-group-overlay flex-nowrap">
      <div class="input-group-prepend-overlay">
        <span class="input-group-text text-muted">
          <i class="fe-mail"></i>
        </span>
      </div>
      <input class="form-control prepended-form-control" type="email" name="EMAIL" placeholder="Your email">
      <div class="input-group-append">
        <button class="btn btn-primary" type="submit" name="subscribe">Subscribe*</button>
      </div>
    </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 class="cs-subscribe-form-antispam" type="text" name="mailchimp-embedded-form-antispam-name-attribute" tabindex="-1">
    </div>
    <small class="form-text text-muted">*Subscribe to our newsletter to receive early discount offers, updates and new products info.</small>
    <div class="cs-subscribe-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 "cs-subscribe-form-antispam"
.cs-widget
  h3.cs-widget-title Subscribe
  form(action="mailchimp-embedded-form-atcion-link", method="post", name="mc-embedded-subscribe-form", target="_blank", novalidate).cs-subscribe-form.validate
    .input-group.input-group-overlay.flex-nowrap
      .input-group-prepend-overlay
        span.input-group-text.text-muted
          i.fe-mail
      input(type="email", name="EMAIL", placeholder="Your email").form-control.prepended-form-control
      .input-group-append
        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").cs-subscribe-form-antispam
    small.form-text.text-muted *Subscribe to our newsletter to receive early discount offers, updates and new products info.
    .cs-subscribe-status

Contact details

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