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
-->
<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="b_c7103e2c981361a6639545bd5_29ca296126" 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
.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="b_c7103e2c981361a6639545bd5_29ca296126", 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