![Cartzilla](../img/logo-dark.png)
Widgets
Collection of tiny components to use inside sidebar area or footer.
Cartzilla component
Range slider widget depends on noUISlider plugin. Make sure to link to noUISlider css and js files in your document: vendor/nouislider/distribute/nouislider.min.css and vendor/nouislider/distribute/nouislider.min.js. Use this page as a reference.
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 & 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 & 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
<!-- 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
Links
<!-- Widget: Links -->
<div class="widget widget-links">
<h3 class="widget-title">Useful links</h3>
<ul class="widget-list">
<li class="widget-list-item">
<a href="#" class="widget-list-link">Your account</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Shipping rates & policies</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Refunds & replacements</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Taxes</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Delivery info</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Affiliate program</a>
</li>
</ul>
</div>
// Widget: Links
.widget.widget-links
h3.widget-title Useful links
ul.widget-list
li.widget-list-item
a.widget-list-link(href="#") Your account
li.widget-list-item
a.widget-list-link(href="#") Shipping rates & policies
li.widget-list-item
a.widget-list-link(href="#") Refunds & replacements
li.widget-list-item
a.widget-list-link(href="#") Taxes
li.widget-list-item
a.widget-list-link(href="#") Delivery info
li.widget-list-item
a.widget-list-link(href="#") Affiliate program
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
Featured products carousel
<!-- Widget: Featured products carousel -->
<div class="widget">
<h3 class="widget-title">Featured products</h3>
<div class="tns-carousel tns-nav-start">
<div class="tns-carousel-inner" data-carousel-options='{"controls": false}'>
<!-- Item -->
<div>
<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>
</div>
</div>
</div>
</div>
<!-- Item -->
<div>
<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>
</div>
</div>
</div>
</div>
<!-- Item -->
<div>
<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>
</div>
</div>
</div>
</div>
<!-- Item -->
<div>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
// Widget: Featured products carousel
.widget
h3.widget-title Featured products
.tns-carousel.tns-nav-start
.tns-carousel-inner(data-carousel-options='{"controls": false}')
// Item
div
.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
// Item
div
.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
// Item
div
.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
// Item
div
.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
Shopping cart
<!-- 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">×</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">×</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">×</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">×</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") ×
.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") ×
.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") ×
.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") ×
.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)
<!-- 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)
<!-- 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