Cartzilla Buy now

Widgets

Collection of tiny components to use inside sidebar area or footer.

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="accordion-item">
      <h3 class="accordion-header">
        <a href="#clothing" class="accordion-button" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="clothing">
          Clothing
        </a>
      </h3>
      <div id="clothing" class="accordion-collapse collapse show" data-bs-parent="#shop-categories">
        <div class="accordion-body">
          <div class="widget widget-links widget-filter">

            <!-- Search -->
            <div class="input-group input-group-sm mb-2">
              <input type="text" class="widget-filter-search form-control rounded-end" placeholder="Search">
              <i class="ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3"></i>
            </div>

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

    <!-- Category without search bar and scrollbar (less items) -->
    <div class="accordion-item">
      <h3 class="accordion-header">
        <a href="#sunglasses" class="accordion-button collapsed" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sunglasses">
          Sunglasses
        </a>
      </h3>
      <div id="sunglasses" class="accordion-collapse collapse" data-bs-parent="#shop-categories">
        <div class="accordion-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="fs-xs text-muted ms-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="fs-xs text-muted ms-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="fs-xs text-muted ms-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)
    .accordion
      h3.accordion-header
        a(href="#clothing", role="button", data-bs-toggle="collapse", aria-expanded="true", aria-controls="clothing").accordion-button
          | Clothing
      #clothing.accordion-collapse.collapse.show(data-bs-parent="#shop-categories")
        .accordion-body
          .widget.widget-links.widget-filter
          
            // Search
            .input-group.input-group-sm.mb-2
              input(type="text", placeholder="Search").widget-filter-search.form-control.rounded-end
              i.ci-search.position-absolute.top-50.end-0.translate-middle-y.fs-sm.me-3

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

    // Category without search bar and scrollbar (less items)
    .accordion
      h3.accordion-header
        a(href="#sunglasses" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sunglasses").accordion-button.collapsed
          | Sunglasses
      #sunglasses.accordion-collapse.collapse(data-bs-parent="#shop-categories")
        .accordion-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.fs-xs.text-muted.ms-3 1,842
              li.widget-list-item
                a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
                  span Fashion Sunglasses
                  span.fs-xs.text-muted.ms-3 953
              li.widget-list-item
                a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
                  span Sport Sunglasses
                  span.fs-xs.text-muted.ms-3 589
              li.widget-list-item
                a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
                  span Classic Sunglasses
                  span.fs-xs.text-muted.ms-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="range-slider" data-start-min="250" data-start-max="680" data-min="0" data-max="1000" data-step="1">
    <div class="range-slider-ui"></div>
    <div class="d-flex">
      <div class="w-50 pe-2 me-2">
        <div class="input-group input-group-sm">
          <span class="input-group-text">$</span>
          <input class="form-control range-slider-value-min" type="text">
        </div>
      </div>
      <div class="w-50 ps-2">
        <div class="input-group input-group-sm">
          <span class="input-group-text">$</span>
          <input class="form-control 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
  .range-slider(data-start-min="250", data-start-max="680", data-min="0", data-max="1000", data-step="1")
    .range-slider-ui
    .d-flex
      .w-50.pe-2.me-2
        .input-group.input-group-sm
          span.input-group-text $
          input(type="text").form-control.range-slider-value-min
      .w-50.ps-2
        .input-group.input-group-sm
          span.input-group-text $
          input(type="text").form-control.range-slider-value-max

Featured products list

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

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

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

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

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

  // Item
  .d-flex.align-items-center.py-2
    a(href="#").flex-shrink-0
      img(src="path-to-image", width="64", alt="Product")
    .ps-2
      h6.widget-product-title
        a(href="#") Cotton Polo Regular Fit
      .widget-product-meta
        span.text-accent.me-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="btn-close text-danger" type="button" aria-label="Remove">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="d-flex align-items-center">
        <a class="flex-shrink-0" href="#">
          <img src="path-to-image" width="64" alt="Product"/>
        </a>
        <div class="ps-2">
          <h6 class="widget-product-title"><a href="#">Women Colorblock Sneakers</a></h6>
          <div class="widget-product-meta">
            <span class="text-accent me-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="btn-close text-danger" type="button" aria-label="Remove">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="d-flex align-items-center">
        <a class="flex-shrink-0" href="#">
          <img src="path-to-image" width="64" alt="Product"/>
        </a>
        <div class="ps-2">
          <6 class="widget-product-title"><a href="#">TH Jeans City Backpack</a></h6>
          <div class="widget-product-meta">
            <span class="text-accent me-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="btn-close text-danger" type="button" aria-label="Remove">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="d-flex align-items-center">
        <a class="flex-shrink-0" href="#">
          <img src="path-to-image" width="64" alt="Product"/>
        </a>
        <div class="ps-2">
          <h6 class="widget-product-title"><a href="#">3-Color Sun Stash Hat</a></h6>
          <div class="widget-product-meta">
            <span class="text-accent me-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="btn-close text-danger" type="button" aria-label="Remove">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="d-flex align-items-center">
        <a class="flex-shrink-0" href="#">
          <img src="path-to-image" width="64" alt="Product"/>
        </a>
        <div class="ps-2">
          <h6 class="widget-product-title"><a href="#">Cotton Polo Regular Fit</a></h6>
          <div class="widget-product-meta">
            <span class="text-accent me-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="fs-sm me-2 py-2">
      <span class="text-muted">Subtotal:</span>
      <span class="text-accent fs-base ms-1">$265.<small>00</small></span>
    </div>
    <a class="btn btn-outline-secondary btn-sm" href="#">
      Expand cart
      <i class="ci-arrow-right ms-1 me-n1"></i>
    </a>
  </div>
  <a class="btn btn-primary btn-sm d-block w-100" href="#">
    <i class="ci-card me-2 fs-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="btn-close text-danger", aria-label="Remove")
        span(aria-hidden="true") &times;
      .d-flex.align-items-center
        a(href="#").flex-shrink-0
          img(src="path-to-image", width="64", alt="Product")
        .ps-2
          h6.widget-product-title
            a(href="#") Women Colorblock Sneakers
          .widget-product-meta
            span.text-accent.me-2
              | $150.
              small 00
            span.text-muted x 1
    
    // Item
    .widget-cart-item.py-2.border-bottom
      button(type="button", class="btn-close text-danger", aria-label="Remove")
        span(aria-hidden="true") &times;
      .d-flex.align-items-center
        a(href="#").flex-shrink-0
          img(src="path-to-image", width="64", alt="Product")
        .ps-2
          h6.widget-product-title
            a(href="#") TH Jeans City Backpack
          .widget-product-meta
            span.text-accent.me-2
              | $79.
              small 50
            span.text-muted x 1
    
    // Item
    .widget-cart-item.py-2.border-bottom
      button(type="button", class="btn-close text-danger", aria-label="Remove")
        span(aria-hidden="true") &times;
      .d-flex.align-items-center
        a(href="#").flex-shrink-0
          img(src="path-to-image", width="64", alt="Product")
        .ps-2
          h6.widget-product-title
            a(href="#") 3-Color Sun Stash Hat
          .widget-product-meta
            span.text-accent.me-2
              | $22.
              small 50
            span.text-muted x 1

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

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

Tag cloud

<!-- Widget: Tag cloud -->
<div class="widget">
  <h3 class="widget-title">Popular tags</h3>
  <a href="#" class="btn-tag me-2 mb-2">#cartzilla news</a>
  <a href="#" class="btn-tag active me-2 mb-2">#active tag</a>
  ...
</div>
// Widget: Tag cloud
.widget
  h3.widget-title Popular tags
  a(href="#").btn-tag.me-2.mb-2 #cartzilla news
  a(href="#").btn-tag.active.me-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 widget-filter">
  <h3 class="widget-title">Filter by brand</h3>
  <div class="input-group input-group-sm mb-2">
    <input type="text" class="widget-filter-search form-control rounded-end pe-5" placeholder="Search">
    <i class="ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3"></i>
  </div>
  <ul class="widget-list widget-filter-list list-unstyled pt-1" style="max-height: 13rem;" data-simplebar data-simplebar-auto-hide="false">
    <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
      <div class="form-check">
        <input type="checkbox" id="adidas" class="form-check-input">
        <label class="form-check-label widget-filter-item-text" for="adidas">Adidas</label>
      </div>
      <span class="fs-xs text-muted">425</span>
    </li>
    <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
      <div class="form-check">
        <input type="checkbox" id="ataylor" class="form-check-input">
        <label class="form-check-label widget-filter-item-text" for="ataylor">Ann Taylor</label>
      </div>
      <span class="fs-xs text-muted">15</span>
    </li>
    <!-- Add as many items as you need -->
  </ul>
</div>
// Widget: Filter (checkboxes)
.widget.widget-filter
  h3.widget-title Filter by brand
  .input-group.input-group-sm.mb-2
    input(type="text", placeholder="Search").widget-filter-search.form-control.rounded-end.pe-5
    i.ci-search.position-absolute.top-50.end-0.translate-middle-y.fs-sm.me-3
  ul(style="max-height: 13rem;", data-simplebar, data-simplebar-auto-hide="false").widget-list.widget-filter-list.list-unstyled.pt-1
    li.widget-filter-item.d-flex.justify-content-between.align-items-center.mb-1
      .form-check
        input(type="checkbox", id="adidas").form-check-input
        label.form-check-label.widget-filter-item-text(for="adidas") Adidas
      span.fs-xs.text-muted 425
    li.widget-filter-item.d-flex.justify-content-between.align-items-center.mb-1
      .form-check
        input(type="checkbox", id="ataylor").form-check-input
        label.form-check-label.widget-filter-item-text(for="ataylor") Ann Taylor
      span.fs-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 "subscription-form-antispam"
-->
<div class="widget">
  <h3 class="widget-title">Subscribe</h3>
  <form class="subscription-form validate" action="mailchimp-embedded-form-atcion-link" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
    <div class="input-group flex-nowrap">
      <i class="ci-mail position-absolute top-50 translate-middle-y text-muted fs-base ms-3"></i>
      <input class="form-control rounded-start" type="email" name="EMAIL" placeholder="Your email" required>
      <button class="btn btn-primary" type="submit" name="subscribe">Subscribe*</button>
    </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="subscription-form-antispam" name="mailchimp-embedded-form-antispam-name-attribute" tabindex="-1">
    </div>
    <div class="form-text">*Subscribe to our newsletter to receive early discount offers, updates and new products info.</div>
    <div class="subscription-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 "subscription-form-antispam"
form(action="mailchimp-embedded-form-atcion-link", method="post", name="mc-embedded-subscribe-form", target="_blank", novalidate).subscription-form.validate
  .input-group.flex-nowrap
    i.ci-mail.position-absolute.top-50.translate-middle-y.text-muted.fs-base.ms-3
    input(type="email", name="EMAIL", placeholder="Your email", required).form-control.rounded-start
    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").subscription-form-antispam
  .form-text *Subscribe to our newsletter to receive early discount offers, updates and new products info.
  .subscription-status

Contact details

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