Cartzilla Buy now

Widgets

Collection of tiny components to use inside sidebar area.

Cartzilla component

Categories

<!-- Widget: Categories -->
<div class="widget widget-categories">
  <h3 class="widget-title">Shop categories</h3>
  <div id="shop-categories" class="accordion">

    <!-- Category with search bar and scrollbar (more items) -->
    <div class="card">
      <div class="card-header">
        <h3 class="accordion-heading">
          <a href="#clothing" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="clothing">
            Clothing
            <span class="accordion-indicator"></span>
          </a>
        </h3>
      </div>
      <div id="clothing" class="collapse show" data-parent="#shop-categories">
        <div class="card-body">
          <div class="widget widget-links cz-filter">

            <!-- Search -->
            <div class="input-group-overlay input-group-sm mb-2">
              <input type="text" class="cz-filter-search form-control form-control-sm appended-form-control" placeholder="Search">
              <div class="input-group-append-overlay">
                <span class="input-group-text">
                  <i class="czi-search"></i>
                </span>
              </div>
            </div>

            <!-- Sub-categories -->
            <ul class="widget-list cz-filter-list pt-1" style="height: 12rem;" data-simplebar data-simplebar-auto-hide="false">
              <li class="widget-list-item cz-filter-item">
                <a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
                  <span class="cz-filter-item-text">View all</span>
                  <span class="font-size-xs text-muted ml-3">2,548</span>
                </a>
              </li>
              <li class="widget-list-item cz-filter-item">
                <a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
                  <span class="cz-filter-item-text">Blazers &amp; Suits</span>
                  <span class="font-size-xs text-muted ml-3">235</span>
                </a>
              </li>
              <li class="widget-list-item cz-filter-item">
                <a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
                  <span class="cz-filter-item-text">Blouses</span>
                  <span class="font-size-xs text-muted ml-3">410</span>
                </a>
              </li>
              ...
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- Category without search bar and scrollbar (less items) -->
    <div class="card">
      <div class="card-header">
        <h3 class="accordion-heading">
          <a href="#sunglasses" class="collapsed" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sunglasses">
            Sunglasses
            <span class="accordion-indicator"></span>
          </a>
        </h3>
      </div>
      <div id="sunglasses" class="collapse" data-parent="#shop-categories">
        <div class="card-body">

          <!-- Sub-categories -->
          <div class="widget widget-links">
            <ul class="widget-list">
              <li class="widget-list-item">
                <a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
                  <span>View all</span>
                  <span class="font-size-xs text-muted ml-3">1,842</span>
                </a>
              </li>
              <li class="widget-list-item">
                <a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
                  <span>Fashion Sunglasses</span>
                  <span class="font-size-xs text-muted ml-3">953</span>
                </a>
              </li>
              <li class="widget-list-item">
                <a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
                  <span>Sport Sunglasses</span>
                  <span class="font-size-xs text-muted ml-3">589</span>
                </a>
              </li>
              ...
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- Add as many categories and sub-categories as you need -->
  </div>
</div>
// Widget: Categories
.widget.widget-categories
  h3.widget-title Shop categories
  #shop-categories.accordion

    // Category with search bar and scrollbar (more items)
    .card
      .card-header
        h3.accordion-heading
          a(href="#clothing", role="button", data-toggle="collapse", aria-expanded="true", aria-controls="clothing")
            | Clothing
            span.accordion-indicator
      #clothing.collapse.show(data-parent="#shop-categories")
        .card-body
          .widget.widget-links.cz-filter
          
            // Search
            .input-group-overlay.input-group-sm.mb-2
              input(type="text", placeholder="Search").cz-filter-search.form-control.form-control-sm.appended-form-control
              .input-group-append-overlay
                span.input-group-text
                  i.czi-search

            // Sub-categories
            ul(style="height: 12rem;", data-simplebar, data-simplebar-auto-hide="false").widget-list.cz-filter-list.pt-1
              li.widget-list-item.cz-filter-item
                a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
                  span.cz-filter-item-text View all
                  span.font-size-xs.text-muted.ml-3 2,548
              li.widget-list-item.cz-filter-item
                a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
                  span.cz-filter-item-text Blazers &amp; Suits
                  span.font-size-xs.text-muted.ml-3 235
              li.widget-list-item.cz-filter-item
                a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
                  span.cz-filter-item-text Blouses
                  span.font-size-xs.text-muted.ml-3 410
              ...

    // Category without search bar and scrollbar (less items)
    .card
      .card-header
        h3.accordion-heading
          a(href="#sunglasses" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sunglasses").collapsed
            | Sunglasses
            span.accordion-indicator
      #sunglasses.collapse(data-parent="#shop-categories")
        .card-body

          // Sub-categories
          .widget.widget-links
            ul.widget-list
              li.widget-list-item
                a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
                  span View all
                  span.font-size-xs.text-muted.ml-3 1,842
              li.widget-list-item
                a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
                  span Fashion Sunglasses
                  span.font-size-xs.text-muted.ml-3 953
              li.widget-list-item
                a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
                  span Sport Sunglasses
                  span.font-size-xs.text-muted.ml-3 589
              li.widget-list-item
                a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
                  span Classic Sunglasses
                  span.font-size-xs.text-muted.ml-3 300
    
    // Add as many categories and sub-categories as you need

Price range

Price range

$
$
<!-- Widget: Range slider
        Data API:
        data-start-min - position of the slider's left handle
        data-start-max - position of the slider's right handle
        data-min - range minimum
        data-max - range maximum
        data-step - range step
-->
<div class="widget">
  <h3 class="widget-title">Price range</h3>
  <div class="cz-range-slider" data-start-min="250" data-start-max="680" data-min="0" data-max="1000" data-step="1">
    <div class="cz-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 cz-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 cz-range-slider-value-max" type="text">
        </div>
      </div>
    </div>
  </div>
</div>
// Widget: Range slider
// Data API:
// data-start-min - position of the slider's left handle
// data-start-max - position of the slider's right handle
// data-min - range minimum
// data-max - range maximum
// data-step - range step
.widget
  h3.widget-title Price range
  .cz-range-slider(data-start-min="250", data-start-max="680", data-min="0", data-max="1000", data-step="1")
    .cz-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.cz-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.cz-range-slider-value-max

Featured products list

<!-- Widget: Featured products list -->
<div class="widget">
  <h3 class="widget-title">Featured products</h3>

  <!-- Item -->
  <div class="media align-items-center pb-2 border-bottom">
    <a class="d-block mr-2" href="#">
      <img width="64" src="path-to-image" alt="Product"/>
    </a>
    <div class="media-body">
      <h6 class="widget-product-title"><a href="#">Women Colorblock Sneakers</a></h6>
      <div class="widget-product-meta">
        <span class="text-accent mr-2">$150.<small>00</small></span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="media align-items-center py-2 border-bottom">
    <a class="d-block mr-2" href="#">
      <img width="64" src="path-to-image" alt="Product"/>
    </a>
    <div class="media-body">
      <6 class="widget-product-title"><a href="#">TH Jeans City Backpack</a></h6>
      <div class="widget-product-meta">
        <span class="text-accent mr-2">$79.<small>00</small></span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="media align-items-center py-2 border-bottom">
    <a class="d-block mr-2" href="#">
      <img width="64" src="path-to-image" alt="Product"/>
    </a>
    <div class="media-body">
      <h6 class="widget-product-title"><a href="#">3-Color Sun Stash Hat</a></h6>
      <div class="widget-product-meta">
        <span class="text-accent mr-2">$22.<small>00</small></span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="media align-items-center py-2">
    <a class="d-block mr-2" href="#">
      <img width="64" src="path-to-image" alt="Product"/>
    </a>
    <div class="media-body">
      <h6 class="widget-product-title"><a href="#">Cotton Polo Regular Fit</a></h6>
      <div class="widget-product-meta">
        <span class="text-accent mr-2">$9.<small>00</small></span>
      </div>
    </div>
  </div>
</div>
// Widget: Featured products list
.widget
  h3.widget-title Featured products
  
  // Item
  .media.align-items-center.pb-2.border-bottom
    a(href="#").d-block.mr-2
      +image("path-to-image", "Product")(width="64")
    .media-body
      h6.widget-product-title
        a(href="#") Women Colorblock Sneakers
      .widget-product-meta
        span.text-accent.mr-2
          | $150.
          small 00
  
  // Item
  .media.align-items-center.py-2.border-bottom
    a(href="#").d-block.mr-2
      +image("path-to-image", "Product")(width="64")
    .media-body
      h6.widget-product-title
        a(href="#") TH Jeans City Backpack
      .widget-product-meta
        span.text-accent.mr-2
          | $79.
          small 50
  
  // Item
  .media.align-items-center.py-2.border-bottom
    a(href="#").d-block.mr-2
      +image("path-to-image", "Product")(width="64")
    .media-body
      h6.widget-product-title
        a(href="#") 3-Color Sun Stash Hat
      .widget-product-meta
        span.text-accent.mr-2
          | $22.
          small 50

  // Item
  .media.align-items-center.py-2
    a(href="#").d-block.mr-2
      +image("path-to-image", "Product")(width="64")
    .media-body
      h6.widget-product-title
        a(href="#") Cotton Polo Regular Fit
      .widget-product-meta
        span.text-accent.mr-2
          | $9.
          small 00

Shopping cart

Your cart

Subtotal:$265.00
Expand cart
Checkout 
<!-- Widget: Shopping cart -->
<div class="widget widget-cart">
  <h3 class="widget-title">Your cart</h3>

  <!-- Scrollable area -->
  <div style="max-height: 15rem;" data-simplebar data-simplebar-auto-hide="false">

    <!-- Item -->
    <div class="widget-cart-item pb-2 border-bottom">
      <button class="close text-danger" type="button" aria-label="Remove">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="media align-items-center">
        <a class="d-block mr-2" href="#">
          <img width="64" src="path-to-image" alt="Product"/>
        </a>
        <div class="media-body">
          <h6 class="widget-product-title"><a href="#">Women Colorblock Sneakers</a></h6>
          <div class="widget-product-meta">
            <span class="text-accent mr-2">$150.<small>00</small></span>
            <span class="text-muted">x 1</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Item -->
    <div class="widget-cart-item py-2 border-bottom">
      <button class="close text-danger" type="button" aria-label="Remove">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="media align-items-center">
        <a class="d-block mr-2" href="#">
          <img width="64" src="path-to-image" alt="Product"/>
        </a>
        <div class="media-body">
          <6 class="widget-product-title"><a href="#">TH Jeans City Backpack</a></h6>
          <div class="widget-product-meta">
            <span class="text-accent mr-2">$79.<small>00</small></span>
            <span class="text-muted">x 1</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Item -->
    <div class="widget-cart-item py-2 border-bottom">
      <button class="close text-danger" type="button" aria-label="Remove">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="media align-items-center">
        <a class="d-block mr-2" href="#">
          <img width="64" src="path-to-image" alt="Product"/>
        </a>
        <div class="media-body">
          <h6 class="widget-product-title"><a href="#">3-Color Sun Stash Hat</a></h6>
          <div class="widget-product-meta">
            <span class="text-accent mr-2">$22.<small>00</small></span>
            <span class="text-muted">x 1</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Item -->
    <div class="widget-cart-item py-2 border-bottom">
      <button class="close text-danger" type="button" aria-label="Remove">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="media align-items-center">
        <a class="d-block mr-2" href="#">
          <img width="64" src="path-to-image" alt="Product"/>
        </a>
        <div class="media-body">
          <h6 class="widget-product-title"><a href="#">Cotton Polo Regular Fit</a></h6>
          <div class="widget-product-meta">
            <span class="text-accent mr-2">$9.<small>00</small></span>
            <span class="text-muted">x 1</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <div class="d-flex flex-wrap justify-content-between align-items-center py-3">
    <div class="font-size-sm mr-2 py-2">
      <span class="text-muted">Subtotal:</span>
      <span class="text-accent font-size-base ml-1">$265.<small>00</small></span>
    </div>
    <a class="btn btn-outline-secondary btn-sm" href="#">
      Expand cart
      <i class="czi-arrow-right ml-1 mr-n1"></i>
    </a>
  </div>
  <a class="btn btn-primary btn-sm btn-block" href="#">
    <i class="czi-card mr-2 font-size-base align-middle"></i>
    Checkout
  </a>
</div>
// Widget: Shopping cart
.widget.widget-cart
  h3.widget-title Your cart

  // Scrollable area
  div(style="max-height: 15rem;", data-simplebar, data-simplebar-auto-hide="false")
  
    // Item
    .widget-cart-item.pb-2.border-bottom
      button(type="button", class="close text-danger", aria-label="Remove")
        span(aria-hidden="true") &times;
      .media.align-items-center
        a(href="#").d-block.mr-2
          +image("path-to-image", "Product")(width="64")
        .media-body
          h6.widget-product-title
            a(href="#") Women Colorblock Sneakers
          .widget-product-meta
            span.text-accent.mr-2
              | $150.
              small 00
            span.text-muted x 1
    
    // Item
    .widget-cart-item.py-2.border-bottom
      button(type="button", class="close text-danger", aria-label="Remove")
        span(aria-hidden="true") &times;
      .media.align-items-center
        a(href="#").d-block.mr-2
          +image("path-to-image", "Product")(width="64")
        .media-body
          h6.widget-product-title
            a(href="#") TH Jeans City Backpack
          .widget-product-meta
            span.text-accent.mr-2
              | $79.
              small 50
            span.text-muted x 1
    
    // Item
    .widget-cart-item.py-2.border-bottom
      button(type="button", class="close text-danger", aria-label="Remove")
        span(aria-hidden="true") &times;
      .media.align-items-center
        a(href="#").d-block.mr-2
          +image("path-to-image", "Product")(width="64")
        .media-body
          h6.widget-product-title
            a(href="#") 3-Color Sun Stash Hat
          .widget-product-meta
            span.text-accent.mr-2
              | $22.
              small 50
            span.text-muted x 1

    // Item
    .widget-cart-item.py-2.border-bottom
      button(type="button", class="close text-danger", aria-label="Remove")
        span(aria-hidden="true") &times;
      .media.align-items-center
        a(href="#").d-block.mr-2
          +image("path-to-image", "Product")(width="64")
        .media-body
          h6.widget-product-title
            a(href="#") Cotton Polo Regular Fit
          .widget-product-meta
            span.text-accent.mr-2
              | $9.
              small 00
            span.text-muted x 1

  // Footer
  .d-flex.flex-wrap.justify-content-between.align-items-center.py-3
    .font-size-sm.mr-2.py-2
      span.text-muted Subtotal:
      span.text-accent.font-size-base.ml-1
        | $265.
        small 00
    a(href="#").btn.btn-outline-secondary.btn-sm
      | Expand cart
      i.czi-arrow-right.ml-1.mr-n1
  a(href="#").btn.btn-primary.btn-sm.btn-block
    i.czi-card.mr-2.font-size-base.align-middle
    | Checkout

Tag cloud

<!-- Widget: Tag cloud -->
<div class="widget">
  <h3 class="widget-title">Popular tags</h3>
  <a href="#" class="btn-tag mr-2 mb-2">#cartzilla news</a>
  <a href="#" class="btn-tag active mr-2 mb-2">#active tag</a>
  ...
</div>
// Widget: Tag cloud
.widget
  h3.widget-title Popular tags
  a(href="#").btn-tag.mr-2.mb-2 #cartzilla news
  a(href="#").btn-tag.active.mr-2.mb-2 #active tag
  ...

Filter (checkboxes)

Filter by brand

  • 425
  • 15
  • 18
  • 103
  • 27
  • 10
  • 365
  • 508
  • 176
  • 54
  • 739
  • 92
  • 17
  • 361
  • 264
  • 75
  • 218
  • 810
  • 147
  • 64
  • 370
  • 506
  • 209
  • 487
  • 90
  • 152
  • 238
  • 29
  • 115 
<!-- Widget: Filter (checkboxes) -->
<div class="widget cz-filter">
  <h3 class="widget-title">Filter by brand</h3>
  <div class="input-group-overlay input-group-sm mb-2">
    <input type="text" class="cz-filter-search form-control form-control-sm appended-form-control" placeholder="Search">
    <div class="input-group-append-overlay">
      <span class="input-group-text">
        <i class="czi-search"></i>
      </span>
    </div>
  </div>
  <ul class="widget-list cz-filter-list list-unstyled pt-1" style="max-height: 12rem;" data-simplebar data-simplebar-auto-hide="false">
    <li class="cz-filter-item d-flex justify-content-between align-items-center mb-1">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" id="adidas" class="custom-control-input">
        <label class="custom-control-label cz-filter-item-text" for="adidas">Adidas</label>
      </div>
      <span class="font-size-xs text-muted">425</span>
    </li>
    <li class="cz-filter-item d-flex justify-content-between align-items-center mb-1">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" id="ataylor" class="custom-control-input">
        <label class="custom-control-label cz-filter-item-text" for="ataylor">Ann Taylor</label>
      </div>
      <span class="font-size-xs text-muted">15</span>
    </li>
    <!-- Add as many items as you need -->
  </ul>
</div>
// Widget: Filter (checkboxes)
.widget.cz-filter
  h3.widget-title Filter by brand
  .input-group-overlay.input-group-sm.mb-2
    input(type="text", placeholder="Search").cz-filter-search.form-control.form-control-sm.appended-form-control
    .input-group-append-overlay
      span.input-group-text
        i.czi-search
  ul(style="max-height: 12rem;", data-simplebar, data-simplebar-auto-hide="false").widget-list.cz-filter-list.list-unstyled.pt-1
    li.cz-filter-item.d-flex.justify-content-between.align-items-center.mb-1
      .custom-control.custom-checkbox
        input(type="checkbox", id="adidas").custom-control-input
        label.custom-control-label.cz-filter-item-text(for="adidas") Adidas
      span.font-size-xs.text-muted 425
    li.cz-filter-item.d-flex.justify-content-between.align-items-center.mb-1
      .custom-control.custom-checkbox
        input(type="checkbox", id="ataylor").custom-control-input
        label.custom-control-label.cz-filter-item-text(for="ataylor") Ann Taylor
      span.font-size-xs.text-muted 15
    //- Add as many items as you need

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 "cz-subscribe-form-antispam"
-->
<div class="widget">
  <h3 class="widget-title">Subscribe</h3>
  <form class="cz-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 font-size-base">
          <i class="czi-mail"></i>
        </span>
      </div>
      <input class="form-control prepended-form-control" type="email" name="EMAIL" placeholder="Your email" required>
      <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 type="text" class="cz-subscribe-form-antispam" 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="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 "cz-subscribe-form-antispam"
form(action="mailchimp-embedded-form-atcion-link", method="post", name="mc-embedded-subscribe-form", target="_blank", novalidate).cz-subscribe-form.validate
  .input-group.input-group-overlay.flex-nowrap
    .input-group-prepend-overlay
      span.input-group-text.text-muted.font-size-base
        i.czi-mail
    input(type="email", name="EMAIL", placeholder="Your email", required).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").cz-subscribe-form-antispam
  small.form-text.text-muted *Subscribe to our newsletter to receive early discount offers, updates and new products info.
  .subscribe-status

Contact details

<!-- Widget: Contact details -->
<div class="widget">
  <ul class="widget-list">
    <li class="media pb-3 border-bottom">
      <i class="czi-location 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 text-heading font-size-sm" href="#">769, Industrial Dr, West Chicago, IL 60185, USA</a>
      </div>
    </li>
    <li class="media pt-2 pb-3 border-bottom">
      <i class="czi-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 text-heading font-size-sm" href="tel:+184725276533">+1 (847) 252 765 33</a>
      </div>
    </li>
    <li class="media pt-2">
      <i class="czi-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 text-heading font-size-sm" href="mailto:email@example.com">email@example.com</a>
      </div>
    </li>
  </ul>
</div>
// Widget: Contact details
.widget
  ul.widget-list
    li.media.pb-3.border-bottom
      i.czi-location.font-size-lg.mt-2.mb-0.text-primary
      .media-body.pl-3
        span.font-size-ms.text-muted Find us
        a.d-block.text-heading.font-size-sm(href="#") 769, Industrial Dr, West Chicago, IL 60185, USA
    li.media.pt-2.pb-3.border-bottom
      i.czi-phone.font-size-lg.mt-2.mb-0.text-primary
      .media-body.pl-3
        span.font-size-ms.text-muted Call us
        a.d-block.text-heading.font-size-sm(href="tel:+184725276533") +1 (847) 252 765 33
    li.media.pt-2
      i.czi-mail.font-size-lg.mt-2.mb-0.text-primary
      .media-body.pl-3
        span.font-size-ms.text-muted Write us
        a.d-block.text-heading.font-size-sm(href="mailto:email@example.com") email@example.com
Top