Widgets

<!-- Widget: Links -->
<div class="cs-widget">
  <h3 class="cs-widget-title">Company</h3>
  <ul>
    <li class="active">
      <a href="#" class="cs-widget-link">About us</a>
    </li>
    <li>
      <a href="#" class="cs-widget-link">Our philosophy</a>
    </li>
    <li>
      <a href="#" class="cs-widget-link">Success stories</a>
    </li>
    <li>
      <a href="#" class="cs-widget-link">Careers</a>
    </li>
    <li>
      <a href="#" class="cs-widget-link">Help center</a>
    </li>
    <li>
      <a href="#" class="cs-widget-link">Contacts</a>
    </li>
  </ul>
</div>

// Widget: Links
.cs-widget
  h3.cs-widget-title Company
  ul
    li.active
      a.cs-widget-link(href="#") About us
    li
      a.cs-widget-link(href="#") Our philosophy
    li
      a.cs-widget-link(href="#") Success stories
    li
      a.cs-widget-link(href="#") Careers
    li
      a.cs-widget-link(href="#") Help center
    li
      a.cs-widget-link(href="#") Contacts

<!-- 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 & 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 & 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 & Accessories
        li
          a.cs-widget-link(href="#") TV, Video & Audio
        li
          a.cs-widget-link(href="#") Smartphones & 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 & Accessories
          ul
            li
              a.cs-widget-link(href="#") Laptops & 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 & Audio
        li
          a.cs-widget-link(href="#") Cameras, Photo & 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 & 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

<!-- 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

<!-- Featured entries: List -->
<div class="cs-widget">

  <!-- Title -->
  <div class="d-flex flex-wrap justify-content-between mb-4">
    <h3 class="cs-widget-title mb-0 mr-3">New arrivals</h3>
    <a class="font-size-sm font-weight-medium" href="#">
      View more
      <i class="fe-chevron-right font-size-lg"></i>
    </a>
  </div>

  <!-- Item -->
  <div class="media align-items-center pb-2 mb-1">
    <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">
      <h4 class="font-size-md nav-heading mb-1">
        <a class="font-weight-medium" href="#">Block-colored Hooded Top</a>
      </h4>
      <p class="font-size-sm mb-0">$27.50</p>
    </div>
  </div>

  <!-- Item -->
  <div class="media align-items-center pb-2 mb-1">
    <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">
      <h4 class="font-size-md nav-heading mb-1">
        <a class="font-weight-medium" href="#">Smart Watch Series 5</a>
      </h4>
      <p class="font-size-sm mb-0">$364.99</p>
    </div>
  </div>

  <!-- Add as many items as you need -->
</div>

// Featured entries: List
.cs-widget

  // Title
  .d-flex.flex-wrap.justify-content-between.mb-4
    h3.cs-widget-title.mb-0.mr-3 New arrivals
    a(href="#").font-size-sm.font-weight-medium
      | View more
      i.fe-chevron-right.font-size-lg

  // Item
  .media.align-items-center.pb-2.mb-1
    a(href="#").d-block
      +image("path-to-image", "Product")(width="60").rounded
    .media-body.pl-2.ml-1
      h4.font-size-md.nav-heading.mb-1
        a(href="#").font-weight-medium
          | Block-colored Hooded Top
      p.font-size-sm.mb-0 $27.50

  // Item
  .media.align-items-center.pb-2.mb-1
    a(href="#").d-block
      +image("path-to-image", "Product")(width="60").rounded
    .media-body.pl-2.ml-1
      h4.font-size-md.nav-heading.mb-1
        a(href="#").font-weight-medium
          | Smart Watch Series 5
      p.font-size-sm.mb-0 $364.99

  // Add as many items as you need

<!-- Featured entries: Carousel -->
<div class="cs-widget">
  <h3 class="cs-widget-title">Trending posts</h3>
  <div class="cs-carousel pt-1">
    <div class="cs-carousel-inner" data-carousel-options='{"controls": false, "gutter": 20}'>

      <!-- Item -->
      <div>
        <div class="media align-items-center"><a class="d-block" href="#">
          <img class="rounded" width="64" src="path-to-image" alt="Post"/>
        </a>
          <div class="media-body pl-2 ml-1">
            <h4 class="font-size-md nav-heading mb-1">
              <a class="font-weight-medium" href="#">Virtual Reality - game changing technology</a>
            </h4>
            <p class="font-size-xs text-muted mb-0">by John Doe</p>
          </div>
        </div>
      </div>

      <!-- Item -->
      <div>
        <div class="media align-items-center">
          <a class="d-block" href="#">
            <img class="rounded" width="64" src="path-to-image" alt="Post"/>
          </a>
          <div class="media-body pl-2 ml-1">
            <h4 class="font-size-md nav-heading mb-1">
              <a class="font-weight-medium" href="#">New trends in suburban fashion</a>
            </h4>
            <p class="font-size-xs text-muted mb-0">by Susan Mayer</p>
          </div>
        </div>
      </div>

      <!-- Add as many items as you need -->
    </div>
  </div>
</div>

// Featured entries: Carousel
.cs-widget
  h3.cs-widget-title Trending posts
  .cs-carousel.pt-1
    .cs-carousel-inner(data-carousel-options='{"controls": false, "gutter": 20}')

      // Items
      div
        .media.align-items-center
          a(href="#").d-block
            +image("path-to-image", "Post")(width="64").rounded
          .media-body.pl-2.ml-1
            h4.font-size-md.nav-heading.mb-1
              a(href="#").font-weight-medium
                | Virtual Reality - game changing technology
            p.font-size-xs.text-muted.mb-0 by John Doe
      
      // Item
      div
        .media.align-items-center
          a(href="#").d-block
            +image("path-to-image", "Post")(width="64").rounded
          .media-body.pl-2.ml-1
            h4.font-size-md.nav-heading.mb-1
              a(href="#").font-weight-medium
                | New trends in suburban fashion
            p.font-size-xs.text-muted.mb-0 by Susan Mayer
      
      // Add as many items as you need

<!-- 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 link -->
<a href="#" class="cs-tag">#business</a>

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

<!-- 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

<!--
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

<!-- 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