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. Go to 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. Replace post? part with post-json? to enable ajax subscription
        5. Change method from 'post' to 'get'
-->
<div class="widget">
  <h3 class="widget-title">Subscribe</h3>
  <form class="validate" action="mailchimp-embedded-form-atcion-link" method="get" name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form">
    <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" id="mce-EMAIL" value="" placeholder="Your email" required>
      <div class="input-group-append">
        <button class="btn btn-primary" type="submit" name="subscribe" id="mc-embedded-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" name="b_c7103e2c981361a6639545bd5_29ca296126" tabindex="-1">
    </div>
    <small class="form-text text-muted" id="mc-helper">*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. Go to 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. Replace post? part with post-json? to enable ajax subscription
// 5. Change method from 'post' to 'get'
form(action="mailchimp-embedded-form-atcion-link", method="get", name="mc-embedded-subscribe-form")#mc-embedded-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", id="mce-EMAIL", placeholder="Your email", required).form-control.prepended-form-control
    .input-group-append
      button#mc-embedded-subscribe.btn.btn-primary(type="submit", name="subscribe") 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="b_c7103e2c981361a6639545bd5_29ca296126" tabindex="-1")
  small#mc-helper.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