<!-- Categories widget -->
<div class="widget widget-categories">
<h3 class="widget-title">Shop categories</h3>
<ul id="shopCategories">
<li class="has-children">
<a href="#shoes" data-toggle="collapse">
<i class="widget-categories-indicator" data-feather="chevron-down"></i>
Shoes
<span class="badge text-muted ml-1">(1138)</span>
</a>
<ul id="shoes" class="collapse show" data-parent="#shopCategories">
<li>
<a href="#">Women's shoes<span class="badge text-muted ml-1">(508)</span></a>
<ul>
<li><a href="#">Sneakers</a></li>
<li><a href="#">Heels</a></li>
</ul>
</li>
<li>
<a href="#">Men's shoes<span class="badge text-muted ml-1">(423)</span></a>
<ul>
<li><a href="#">Boots</a></li>
<li><a href="#">Oxfords</a></li>
</ul>
</li>
<li>
<a href="#">Boy's shoes<span class="badge text-muted ml-1">(97)</span></a>
</li>
<li>
<a href="#">Girl's shoes<span class="badge text-muted ml-1">(110)</span></a>
</li>
</ul>
</li>
<li class="has-children">
<a href="#clothing" data-toggle="collapse">
<i class="widget-categories-indicator" data-feather="chevron-down"></i>
Clothing
<span class="badge text-muted ml-1">(2356)</span>
</a>
<ul id="clothing" class="collapse show" data-parent="#shopCategories">
<li>
<a href="#">Women's clothing<span class="badge text-muted ml-1">(1032)</span></a>
<ul>
<li><a href="#">Dresses</a></li>
<li><a href="#">Shirts & Tops</a></li>
<li><a href="#">Swimwear</a></li>
<li><a href="#">Shorts</a></li>
</ul>
</li>
<li>
<a href="#">Men's clothing<span class="badge text-muted ml-1">(937)</span></a>
<ul>
<li><a href="#">Shirts & Tops</a></li>
<li><a href="#">Shorts</a></li>
<li><a href="#">Swimwear</a></li>
<li><a href="#">Pants</a></li>
</ul>
</li>
<li>
<a href="#">Kid's clothing<span class="badge text-muted ml-1">(386)</span></a>
</li>
</ul>
</li>
<li class="has-children">
<a href="#bags" data-toggle="collapse">
<i class="widget-categories-indicator" data-feather="chevron-down"></i>
Bags
<span class="badge text-muted ml-1">(420)</span>
</a>
<ul id="bags" class="collapse show" data-parent="#shopCategories">
<li>
<a href="#">Handbags<span class="badge text-muted ml-1">(180)</span></a>
</li>
<li>
<a href="#">Backpacks<span class="badge text-muted ml-1">(132)</span></a>
</li>
<li>
<a href="#">Wallets & Accessories<span class="badge text-muted ml-1">(47)</span></a>
</li>
<li>
<a href="#">Luggage<span class="badge text-muted ml-1">(61)</span></a>
</li>
</ul>
</li>
<li class="has-children">
<a href="#accessories" data-toggle="collapse">
<i class="widget-categories-indicator" data-feather="chevron-down"></i>
Accessories
<span class="badge text-muted ml-1">(874)</span>
</a>
<ul id="accessories" class="collapse show" data-parent="#shopCategories">
<li>
<a href="#">Sunglasses<span class="badge text-muted ml-1">(211)</span></a>
</li>
<li>
<a href="#">Hats<span class="badge text-muted ml-1">(195)</span></a>
</li>
<li>
<a href="#">Watches<span class="badge text-muted ml-1">(159)</span></a>
</li>
<li>
<a href="#">Jewelry<span class="badge text-muted ml-1">(203)</span></a>
</li>
<li>
<a href="#">Belts<span class="badge text-muted ml-1">(106)</span></a>
</li>
</ul>
</li>
</ul>
</div>// Categories widget
.widget.widget-categories
h3.widget-title Shop categories
ul#shopCategories
li.has-children
a(href="#shoes", data-toggle="collapse")
i(data-feather="chevron-down").widget-categories-indicator
| Shoes
span.badge.text-muted.ml-1 (1138)
ul#shoes.collapse.show(data-parent="#shopCategories")
li
a(href="#")
| Women's shoes
span.badge.text-muted.ml-1 (508)
ul
li: a(href="#") Sneakers
li: a(href="#") Heels
li
a(href="#")
| Men's shoes
span.badge.text-muted.ml-1 (423)
ul
li: a(href="#") Boots
li: a(href="#") Oxfords
li
a(href="#")
| Boy's shoes
span.badge.text-muted.ml-1 (97)
li
a(href="#")
| Girl's shoes
span.badge.text-muted.ml-1 (110)
li.has-children
a(href="#clothing", data-toggle="collapse").collapsed
i(data-feather="chevron-down").widget-categories-indicator
| Clothing
span.badge.text-muted.ml-1 (2356)
ul#clothing.collapse(data-parent="#shopCategories")
li
a(href="#")
| Women's clothing
span.badge.text-muted.ml-1 (1032)
ul
li: a(href="#") Dresses
li: a(href="#") Shirts & Tops
li: a(href="#") Swimwear
li: a(href="#") Shorts
li
a(href="#")
| Men's clothing
span.badge.text-muted.ml-1 (937)
ul
li: a(href="#") Shirts & Tops
li: a(href="#") Shorts
li: a(href="#") Swimwear
li: a(href="#") Pants
li
a(href="#")
| Kid's clothing
span.badge.text-muted.ml-1 (386)
li.has-children
a(href="#bags", data-toggle="collapse").collapsed
i(data-feather="chevron-down").widget-categories-indicator
| Bags
span.badge.text-muted.ml-1 (420)
ul#bags.collapse(data-parent="#shopCategories")
li
a(href="#")
| Handbags
span.badge.text-muted.ml-1 (180)
li
a(href="#")
| Backpacks
span.badge.text-muted.ml-1 (132)
li
a(href="#")
| Wallets & Accessories
span.badge.text-muted.ml-1 (47)
li
a(href="#")
| Luggage
span.badge.text-muted.ml-1 (61)
li.has-children
a(href="#accessories", data-toggle="collapse").collapsed
i(data-feather="chevron-down").widget-categories-indicator
| Accessories
span.badge.text-muted.ml-1 (874)
ul#accessories.collapse(data-parent="#shopCategories")
li
a(href="#")
| Sunglasses
span.badge.text-muted.ml-1 (211)
li
a(href="#")
| Hats
span.badge.text-muted.ml-1 (195)
li
a(href="#")
| Watches
span.badge.text-muted.ml-1 (159)
li
a(href="#")
| Jewelry
span.badge.text-muted.ml-1 (203)
li
a(href="#")
| Belts
span.badge.text-muted.ml-1 (106)
<!-- Links widget -->
<div class="widget widget-categories">
<h3 class="widget-title">Useful links</h3>
<ul id="shopCategories">
<li>
<a href="#">
<i class="widget-categories-indicator" data-feather="chevron-right"></i>
Your account
</a>
</li>
<li>
<a href="#">
<i class="widget-categories-indicator" data-feather="chevron-right"></i>
Shipping rates & policies
</a>
</li>
<li>
<a href="#">
<i class="widget-categories-indicator" data-feather="chevron-right"></i>
Refunds & replacements
</a>
</li>
<li>
<a href="#">
<i class="widget-categories-indicator" data-feather="chevron-right"></i>
Taxes
</a>
</li>
<li>
<a href="#">
<i class="widget-categories-indicator" data-feather="chevron-right"></i>
Delivery info
</a>
</li>
<li>
<a href="#">
<i class="widget-categories-indicator" data-feather="chevron-right"></i>
Affiliate program
</a>
</li>
</ul>
</div>// Links widget
.widget.widget-links
h3.widget-title Useful links
ul
li
a(href="#")
i(data-feather="chevron-right").widget-categories-indicator
| Your account
li
a(href="#")
i(data-feather="chevron-right").widget-categories-indicator
| Shipping rates & policies
li
a(href="#")
i(data-feather="chevron-right").widget-categories-indicator
| Refunds & replacements
li
a(href="#")
i(data-feather="chevron-right").widget-categories-indicator
| Taxes
li
a(href="#")
i(data-feather="chevron-right").widget-categories-indicator
| Delivery info
li
a(href="#")
i(data-feather="chevron-right").widget-categories-indicator
| Affiliate program
<!-- Price range widget -->
<div class="widget">
<h3 class="widget-title">Price range</h3>
<form class="range-slider" data-start-min="250" data-start-max="650" data-min="0" data-max="1000" data-step="1">
<div class="ui-range-slider"></div>
<footer class="ui-range-slider-footer">
<div class="column">
<button type="submit" class="btn btn-outline-primary btn-sm">Filter</button>
</div>
<div class="column">
<div class="ui-range-label">Price:</div>
<div class="ui-range-value-min">
$<span></span>
<input type="hidden">
</div>
–
<div class="ui-range-value-max">
$<span></span>
<input type="hidden">
</div>
</div>
</footer>
</form>
</div>// Price range widget
.widget
h3.widget-title Price range
form(data-start-min="250", data-start-max="650", data-min="0", data-max="1000", data-step="1").range-slider
.ui-range-slider
footer.ui-range-slider-footer
.column
button.btn.btn-outline-primary.btn-sm(type="submit") Filter
.column
.ui-range-values
.ui-range-label Price:
.ui-range-value-min
| $<span></span>
input(type="hidden")
| –
.ui-range-value-max
| $<span></span>
input(type="hidden")
<!-- Featured products -->
<div class="widget widget-featured-entries">
<h3 class="widget-title">Featured products</h3>
<div class="media">
<a href="#" class="featured-entry-thumb">
<img src="path-to-image" width="64" alt="Product thumb">
</a>
<div class="media-body">
<h6 class="featured-entry-title">
<a href="#">Keds - Kickstart Pom Pom</a>
</h6>
<p class="featured-entry-meta">$42.99</p>
</div>
</div>
<div class="media">
<a href="#" class="featured-entry-thumb">
<img src="path-to-image" width="64" alt="Product thumb">
</a>
<div class="media-body">
<h6 class="featured-entry-title">
<a href="#">Nike - Brasilia Medium Backpack</a>
</h6>
<p class="featured-entry-meta">$27.99</p>
</div>
</div>
<div class="media">
<a href="#" class="featured-entry-thumb">
<img src="path-to-image" width="64" alt="Product thumb">
</a>
<div class="media-body">
<h6 class="featured-entry-title">
<a href="#">Guess - GU7295</a>
</h6>
<p class="featured-entry-meta">$38.00</p>
</div>
</div>
</div>
<!-- Featured products with rating -->
<div class="widget widget-featured-entries">
<h3 class="widget-title">Featured products with rating</h3>
<div class="media">
<a href="#" class="featured-entry-thumb">
<img src="path-to-image" width="64" alt="Product thumb">
</a>
<div class="media-body">
<h6 class="featured-entry-title">
<a href="#">Sennheiser HD 650 Pro</a>
</h6>
<div class="star-rating">
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star" data-feather="star"></i>
</div>
<p class="featured-entry-meta">$259.99</p>
</div>
</div>
<div href="#" class="media">
<a class="featured-entry-thumb">
<img src="path-to-image" width="64" alt="Product thumb">
</a>
<div class="media-body">
<h6 class="featured-entry-title">
<a href="#">Amazon Cloud Cam Security</a>
</h6>
<div class="star-rating">
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star" data-feather="star"></i>
<i class="sr-star" data-feather="star"></i>
</div>
<p class="featured-entry-meta">$119.99</p>
</div>
</div>
<div class="media">
<a href="#" class="featured-entry-thumb">
<img src="path-to-image" width="64" alt="Product thumb">
</a>
<div class="media-body">
<h6 class="featured-entry-title">
<a href="#">Samsung Galaxy S10 128GB</a>
</h6>
<div class="star-rating">
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
</div>
<p class="featured-entry-meta">$799.00</p>
</div>
</div>
</div>// Fetured products widget
.widget.widget-featured-entries
h3.widget-title Featured products
.media
a(href="#").featured-entry-thumb
img(src="path-to-image", width="64", alt="Product thumb")
.media-body
h6.featured-entry-title
a(href="#") Keds - Kickstart Pom Pom
p.featured-entry-meta $42.99
.media
a(href="#").featured-entry-thumb
img(src="path-to-image", width="64", alt="Product thumb")
.media-body
h6.featured-entry-title
a(href="#") Nike - Brasilia Medium Backpack
p.featured-entry-meta $27.99
.media
a(href="#").featured-entry-thumb
img(src="path-to-image", width="64", alt="Product thumb")
.media-body
h6.featured-entry-title
a(href="#") Guess - GU7295
p.featured-entry-meta $38.00
// Featured products with rating
.widget.widget-featured-entries
h3.widget-title Featured products with rating
.media
a(href="#").featured-entry-thumb
img(src="path-to-image", width="64", alt="Product thumb")
.media-body
h6.featured-entry-title
a(href="#") Sennheiser HD 650 Pro
+star-rating(4)
p.featured-entry-meta $259.99
.media
a(href="#").featured-entry-thumb
img(src="path-to-image", width="64", alt="Product thumb")
.media-body
h6.featured-entry-title
a(href="#") Amazon Cloud Cam Security
+star-rating(3)
p.featured-entry-meta $119.99
.media
a(href="#").featured-entry-thumb
img(src="path-to-image", width="64", alt="Product thumb")
.media-body
h6.featured-entry-title
a(href="#") Samsung Galaxy S10 128GB
+star-rating(5)
p.featured-entry-meta $799.00
<!-- Featured products carousel -->
<div class="widget widget-featured-entries">
<h3 class="widget-title">Featured products</h3>
<div class="owl-carousel" data-owl-carousel='{ "nav": false, "dots": true, "loop": true, "margin": 30 }'>
<div class="media">
<a href="#" class="featured-entry-thumb">
<img src="path-to-image" width="64" alt="Product thumb">
</a>
<div class="media-body">
<h6 class="featured-entry-title">
<a href="#">Sennheiser HD 650 Pro</a>
</h6>
<div class="star-rating">
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star" data-feather="star"></i>
</div>
<p class="featured-entry-meta">$259.99</p>
</div>
</div>
<div href="#" class="media">
<a class="featured-entry-thumb">
<img src="path-to-image" width="64" alt="Product thumb">
</a>
<div class="media-body">
<h6 class="featured-entry-title">
<a href="#">Amazon Cloud Cam Security</a>
</h6>
<div class="star-rating">
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star" data-feather="star"></i>
<i class="sr-star" data-feather="star"></i>
</div>
<p class="featured-entry-meta">$119.99</p>
</div>
</div>
<div class="media">
<a href="#" class="featured-entry-thumb">
<img src="path-to-image" width="64" alt="Product thumb">
</a>
<div class="media-body">
<h6 class="featured-entry-title">
<a href="#">Samsung Galaxy S10 128GB</a>
</h6>
<div class="star-rating">
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
<i class="sr-star active" data-feather="star"></i>
</div>
<p class="featured-entry-meta">$799.00</p>
</div>
</div>
</div>
</div>// Featured products carousel
.widget.widget-featured-entries
h3.widget-title Featured products
.owl-carousel(data-owl-carousel='{ "nav": false, "dots": true, "loop": true, "margin": 30 }')
.media
a(href="#").featured-entry-thumb
img(src="path-to-image", width="64", alt="Product thumb")
.media-body
h6.featured-entry-title
a(href="#") Sennheiser HD 650 Pro
+star-rating(4)
p.featured-entry-meta $259.99
.media
a(href="#").featured-entry-thumb
img(src="path-to-image", width="64", alt="Product thumb")
.media-body
h6.featured-entry-title
a(href="#") Amazon Cloud Cam Security
+star-rating(3)
p.featured-entry-meta $119.99
.media
a(href="#").featured-entry-thumb
img(src="path-to-image", width="64", alt="Product thumb")
.media-body
h6.featured-entry-title
a(href="#") Samsung Galaxy S10 128GB
+star-rating(5)
p.featured-entry-meta $799.00
<!-- Shopping cart -->
<div class="widget widget-featured-entries">
<h3 class="widget-title">Your cart</h3>
<!-- Item -->
<div class="media">
<div class="featured-entry-thumb mr-3">
<a href="#">
<img src="path-to-image" width="64" alt="Product thumb">
</a>
<span class="item-remove-btn">
<i data-feather="x"></i>
</span>
</div>
<div class="media-body">
<h6 class="featured-entry-title">
<a href="#">Calvin Klein Jeans Keds</a>
</h6>
<p class="featured-entry-meta">1 <span class="text-muted">x</span> $125.00</p>
</div>
</div>
<!-- Item -->
<div class="media">
<div class="featured-entry-thumb mr-3">
<a href="#">
<img src="path-to-image" width="64" alt="Product thumb">
</a>
<span class="item-remove-btn">
<i data-feather="x"></i>
</span>
</div>
<div class="media-body">
<h6 class="featured-entry-title">
<a href="#">The North Face Hoodie</a>
</h6>
<p class="featured-entry-meta">1 <span class="text-muted">x</span> $134.00</p>
</div>
</div>
<!-- Footer -->
<hr>
<div class="d-flex justify-content-between align-items-center py-3">
<div class="font-size-sm">
<span class="mr-2">Subtotal:</span>
<span class="font-weight-semibold text-dark">$306.00</span>
</div>
<a href="#" class="btn btn-outline-secondary btn-sm">
Expand cart
<i data-feather="chevron-right" class="mr-n2"></i>
</a>
</div>
<a href="#" class="btn btn-primary btn-sm btn-block">
<i data-feather="credit-card" class="mr-1"></i>
Checkout
</a>
</div>// Shopping cart
.widget.widget-featured-entries
h3.widget-title Your cart
.media
.featured-entry-thumb.mr-3
a(href="#")
img(src="path-to-image", width="64", alt="Product thumb")
span.item-remove-btn
i(data-feather="x")
.media-body
h6.featured-entry-title
a(href="#") Calvin Klein Jeans Keds
p.featured-entry-meta 1 <span class="text-muted">x</span> $125.00
.media
.featured-entry-thumb.mr-3
a(href="#")
img(src="path-to-image", width="64", alt="Product thumb"')
span.item-remove-btn
i(data-feather="x")
.media-body
h6.featured-entry-title
a(href="#") The North Face Hoodie
p.featured-entry-meta 1 <span class="text-muted">x</span> $134.00
hr
.d-flex.justify-content-between.align-items-center.py-3
.font-size-sm
span.mr-2 Subtotal:
span.font-weight-semibold.text-dark $306.00
a(href="#").btn.btn-outline-secondary.btn-sm
| Expand cart
i(data-feather="chevron-right").mr-n2
a(href="#").btn.btn-primary.btn-sm.btn-block
i(data-feather="credit-card").mr-1
| Checkout
<!-- Tag cloud -->
<div class="widget">
<h3 class="widget-title">Popular tags</h3>
<a href="#" class="tag-link mr-2 mb-2">#accessories</a>
<a href="#" class="tag-link mr-2 mb-2">#smart devices</a>
<a href="#" class="tag-link active mr-2 mb-2">#active tag</a>
<a href="#" class="tag-link mr-2 mb-2">#apparel</a>
<a href="#" class="tag-link mr-2 mb-2">#handbags</a>
<a href="#" class="tag-link mr-2 mb-2">#sunglasses</a>
</div>// Tag cloud
.widget
h3.widget-title Popular tags
a.tag-link.mr-2.mb-2(href="#") #accessories
a.tag-link.mr-2.mb-2(href="#") #smart devices
a.tag-link.active.mr-2.mb-2(href="#") #active tag
a.tag-link.mr-2.mb-2(href="#") #apparel
a.tag-link.mr-2.mb-2(href="#") #handbags
a.tag-link.mb-2(href="#") #sunglasses
<!-- Filter by brand (checkboxes) -->
<div class="widget">
<h3 class="widget-title">Filter by brand</h3>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="adidas">
<label class="custom-control-label" for="adidas">
Adidas
<span class="text-muted ml-1">(254)</span>
</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="bilabong">
<label class="custom-control-label" for="bilabong">
Bilabong
<span class="text-muted ml-1">(39)</span>
</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="klein">
<label class="custom-control-label" for="klein">
Calvin Klein
<span class="text-muted ml-1">(128)</span>
</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="nike">
<label class="custom-control-label" for="nike">
Nike
<span class="text-muted ml-1">(310)</span>
</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="bahama">
<label class="custom-control-label" for="bahama">
Tommy Bahama
<span class="text-muted ml-1">(46)</span>
</label>
</div>
</div>
<!-- Filter by price (input groups) -->
<div class="widget">
<h3 class="widget-title">Filter by price</h3>
<div class="d-flex align-items-center">
<div>
<label for="from-price">From</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i data-feather="dollar-sign"></i>
</span>
</div>
<input type="text" class="form-control" id="from-price">
</div>
</div>
<div class="mx-2 pt-4">–</div>
<div>
<label for="to-price">To</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i data-feather="dollar-sign"></i>
</span>
</div>
<input type="text" class="form-control" id="to-price">
</div>
</div>
</div>
</div>// Filter by brand (checkboxes)
.widget.mb-5.mb-sm-0
h3.widget-title Filter by brand
.custom-control.custom-checkbox.mb-1
input(type="checkbox", id="adidas").custom-control-input
label(for="adidas").custom-control-label
| Adidas
span.text-muted.ml-1 (254)
.custom-control.custom-checkbox.mb-1
input(type="checkbox", id="bilabong").custom-control-input
label(for="bilabong").custom-control-label
| Bilabong
span.text-muted.ml-1 (39)
.custom-control.custom-checkbox.mb-1
input(type="checkbox", id="klein").custom-control-input
label(for="klein").custom-control-label
| Calvin Klein
span.text-muted.ml-1 (128)
.custom-control.custom-checkbox.mb-1
input(type="checkbox", id="nike").custom-control-input
label(for="nike").custom-control-label
| Nike
span.text-muted.ml-1 (310)
.custom-control.custom-checkbox.mb-1
input(type="checkbox", id="bahama").custom-control-input
label(for="bahama").custom-control-label
| Tommy Bahama
span.text-muted.ml-1 (46)
// Filter by price (input groups)
.widget
h3.widget-title Filter by price
.d-flex.align-items-center
div
label(for="from-price") From
.input-group
.input-group-prepend
span.input-group-text.px-2
i(data-feather="dollar-sign")
input(type="text", id="from-price").form-control
div.mx-2.pt-4 –
div
label(for="to-price") To
.input-group
.input-group-prepend
span.input-group-text.px-2
i(data-feather="dollar-sign")
input(type="text", id="to-price").form-control
<!-- Contacts details widget -->
<ul class="contact-list">
<li>
<div class="contact-icon">
<i data-feather="map-pin"></i>
</div>
<div class="contact-details">
<span>Find us</span>
<a href="link-to-google-map" class="contact-link">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</li>
<li>
<div class="contact-icon">
<i data-feather="phone"></i>
</div>
<div class="contact-details">
<span>Call us</span>
<a href="tel:+184725276533" class="contact-link">+1 (847) 252 765 33</a>
</div>
</li>
<li>
<div class="contact-icon">
<i data-feather="mail"></i>
</div>
<div class="contact-details">
<span>Write us</span>
<a href="mailto:email@example.com" class="contact-link">email@example.com</a>
</div>
</li>
</ul>// Contacts details widget
ul.contact-list
li
.contact-icon
i(data-feather="map-pin")
.contact-details
span.contact-label Find us
a.contact-link(href="link-to-google-map") 769, Industrial Dr, West Chicago, IL 60185, USA
li
.contact-icon
i(data-feather="phone")
.contact-details
span.contact-label Call us
a.contact-link(href="tel:+184725276533") +1 (847) 252 765 33
li
.contact-icon
i(data-feather="mail")
.contact-details
span.contact-label Write us
a.contact-link(href="mailto:email@example.com") email@example.com