Buy now
Widgets
Collection of tiny components to use inside sidebar area.
ws7 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.
Links
<!-- Widget: Links -->
<div class="widget">
<h3 class="widget-title">Company</h3>
<ul>
<li class="active">
<a href="#" class="widget-link">About us</a>
</li>
<li>
<a href="#" class="widget-link">Our philosophy</a>
</li>
<li>
<a href="#" class="widget-link">Success stories</a>
</li>
<li>
<a href="#" class="widget-link">Careers</a>
</li>
<li>
<a href="#" class="widget-link">Help center</a>
</li>
<li>
<a href="#" class="widget-link">Contacts</a>
</li>
</ul>
</div>// Widget: Links
.widget
h3.widget-title Company
ul
li.active
a.widget-link(href="#") About us
li
a.widget-link(href="#") Our philosophy
li
a.widget-link(href="#") Success stories
li
a.widget-link(href="#") Careers
li
a.widget-link(href="#") Help center
li
a.widget-link(href="#") Contacts
Categories
<!-- Widget: Collapsible categories -->
<div class="widget widget-categories">
<h3 class="widget-title">Collapsible categories</h3>
<ul id="categories">
<li>
<a class="widget-link" href="#clothing" data-bs-toggle="collapse">
Clothing
<small class="text-muted ps-1 ms-2">235</small>
</a>
<ul class="collapse show" id="clothing" data-bs-parent="#categories">
<li><a class="widget-link" href="#">Blazers & Suits</a></li>
<li><a class="widget-link" href="#">Cardigans</a></li>
<li><a class="widget-link" href="#">Dresses</a></li>
</ul>
</li>
<li>
<a class="widget-link collapsed" href="#shoes" data-bs-toggle="collapse">
Shoes
<small class="text-muted ps-1 ms-2">210</small>
</a>
<ul class="collapse" id="shoes" data-bs-parent="#categories">
<li><a class="widget-link" href="#">Athletic shoes</a></li>
<li><a class="widget-link" href="#">Balerinas & Flats</a></li>
<li><a class="widget-link" href="#">Boots</a></li>
</ul>
</li>
<li>
<a class="widget-link collapsed" href="#electronics" data-bs-toggle="collapse">
Electronics
<small class="text-muted ps-1 ms-2">197</small>
</a>
<ul class="collapse" id="electronics" data-bs-parent="#categories">
<li><a class="widget-link" href="#">Computers & Accessories</a></li>
<li><a class="widget-link" href="#">TV, Video & Audio</a></li>
<li><a class="widget-link" href="#">Smartphones & Tablets</a></li>
</ul>
</li>
<li>
<a class="widget-link collapsed" href="#accessories" data-bs-toggle="collapse">
Accessories
<small class="text-muted ps-1 ms-2">124</small>
</a>
<ul class="collapse" id="accessories" data-bs-parent="#categories">
<li><a class="widget-link" href="#">Bags</a></li>
<li><a class="widget-link" href="#">Belts</a></li>
<li><a class="widget-link" href="#">Hats</a></li>
</ul>
</li>
</ul>
</div>
<!-- Widget: Static categories -->
<div class="widget widget-categories">
<h3 class="widget-title">Static categories</h3>
<ul>
<li>
<a class="widget-link" href="#">
Clothing
<small class="text-muted ps-1 ms-2">235</small>
</a>
</li>
<li>
<a class="widget-link" href="#">
Shoes
<small class="text-muted ps-1 ms-2">210</small>
</a>
</li>
<li>
<a class="widget-link" href="#">
Electronics
<small class="text-muted ps-1 ms-2">197</small>
</a>
<ul>
<li>
<a class="widget-link" href="#">Computers & Accessories</a>
<ul>
<li><a class="widget-link" href="#">Laptops & Tablets</a></li>
<li><a class="widget-link" href="#">Desktop Computers</a></li>
<li><a class="widget-link" href="#">Computer Accessories</a></li>
</ul>
</li>
<li><a class="widget-link" href="#">TV, Video & Audio</a></li>
<li><a class="widget-link" href="#">Cameras, Photo & Video</a></li>
<li>
<a class="widget-link" href="#">Headphones</a>
<ul>
<li><a class="widget-link" href="#">Earbuds</a></li>
<li><a class="widget-link" href="#">Over-Ear</a></li>
<li><a class="widget-link" href="#">Bluetooth</a></li>
</ul>
</li>
<li><a class="widget-link" href="#">Wearable Electronics</a></li>
<li><a class="widget-link" href="#">Printers & Ink</a></li>
</ul>
</li>
<li>
<a class="widget-link" href="#">
Accessories
<small class="text-muted ps-1 ms-2">124</small>
</a>
</li>
<li>
<a class="widget-link" href="#">
Entertainment
<small class="text-muted ps-1 ms-2">86</small>
</a>
</li>
</ul>
</div>// Widget: Collapsible categories
.widget.widget-categories
h3.widget-title Collapsible categories
ul#categories
li
a(href="#clothing", data-bs-toggle="collapse").widget-link
| Clothing
small.text-muted.ps-1.ms-2 235
ul#clothing.collapse.show(data-bs-parent="#categories")
li
a.widget-link(href="#") Blazers & Suits
li
a.widget-link(href="#") Cardigans
li
a.widget-link(href="#") Dresses
li
a(href="#shoes", data-bs-toggle="collapse").widget-link.collapsed
| Shoes
small.text-muted.ps-1.ms-2 210
ul#shoes.collapse(data-bs-parent="#categories")
li
a.widget-link(href="#") Athletic shoes
li
a.widget-link(href="#") Balerinas & Flats
li
a.widget-link(href="#") Boots
li
a(href="#electronics", data-bs-toggle="collapse").widget-link.collapsed
| Electronics
small.text-muted.ps-1.ms-2 197
ul#electronics.collapse(data-bs-parent="#categories")
li
a.widget-link(href="#") Computers & Accessories
li
a.widget-link(href="#") TV, Video & Audio
li
a.widget-link(href="#") Smartphones & Tablets
li
a(href="#accessories", data-bs-toggle="collapse").widget-link.collapsed
| Accessories
small.text-muted.ps-1.ms-2 124
ul#accessories.collapse(data-bs-parent="#categories")
li
a.widget-link(href="#") Bags
li
a.widget-link(href="#") Belts
li
a.widget-link(href="#") Hats
// Widget: Static categories
.widget.widget-categories
h3.widget-title Static categories
ul
li
a(href="#").widget-link
| Clothing
small.text-muted.ps-1.ms-2 235
li
a(href="#").widget-link
| Shoes
small.text-muted.ps-1.ms-2 210
li
a(href="#").widget-link
| Electronics
small.text-muted.ps-1.ms-2 197
ul
li
a.widget-link(href="#") Computers & Accessories
ul
li
a.widget-link(href="#") Laptops & Tablets
li
a.widget-link(href="#") Desktop Computers
li
a.widget-link(href="#") Computer Accessories
li
a.widget-link(href="#") TV, Video & Audio
li
a.widget-link(href="#") Cameras, Photo & Video
li
a.widget-link(href="#") Headphones
ul
li
a.widget-link(href="#") Earbuds
li
a.widget-link(href="#") Over-Ear
li
a.widget-link(href="#") Bluetooth
li
a.widget-link(href="#") Wearable Electronics
li
a.widget-link(href="#") Printers & Ink
li
a.widget-link(href="#")
| Accessories
small.text-muted.ps-1.ms-2 124
li
a.widget-link(href="#")
| Entertainment
small.text-muted.ps-1.ms-2 86
Range slider
<!-- Widget: Range slider -->
<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
.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 entries: List
New arrivals
View more
Block-colored Hooded Top
$27.50
Smart Watch Series 5
$364.99
Running Sneakers, Collection
$145.00
Bluetooth Headset
$258.00
<!-- Featured entries: List -->
<div class="widget">
<!-- Title -->
<div class="d-flex flex-wrap justify-content-between mb-4">
<h3 class="widget-title mb-0 me-3">New arrivals</h3>
<a class="fs-sm fw-medium" href="#">
View more
<i class="ai-chevron-right fs-lg align-middle"></i>
</a>
</div>
<!-- Item -->
<div class="d-flex align-items-center pb-2 mb-1">
<a class="d-block flex-shrink-0" href="#">
<img class="rounded" width="60" src="path-to-image" alt="Product"/>
</a>
<div class="ps-2 ms-1">
<h4 class="fs-md nav-heading mb-1">
<a class="fw-medium" href="#">Block-colored Hooded Top</a>
</h4>
<p class="fs-sm mb-0">$27.50</p>
</div>
</div>
<!-- Item -->
<div class="d-flex align-items-center pb-2 mb-1">
<a class="d-block flex-shrink-0" href="#">
<img class="rounded" width="60" src="path-to-image" alt="Product"/>
</a>
<div class="ps-2 ms-1">
<h4 class="fs-md nav-heading mb-1">
<a class="fw-medium" href="#">Smart Watch Series 5</a>
</h4>
<p class="fs-sm mb-0">$364.99</p>
</div>
</div>
<!-- Add as many items as you need -->
</div>// Featured entries: List
.widget
// Title
.d-flex.flex-wrap.justify-content-between.mb-4
h3.widget-title.mb-0.me-3 New arrivals
a(href="#").fs-sm.fw-medium
| View more
i.ai-chevron-right.fs-lg.align-middle
// Item
.d-flex.align-items-center.pb-2.mb-1
a(href="#").d-block.flex-shrink-0
img(src="path-to-image", alt="Product", width="60").rounded
.ps-2.ms-1
h4.fs-md.nav-heading.mb-1
a(href="#").fw-medium
| Block-colored Hooded Top
p.fs-sm.mb-0 $27.50
// Item
.d-flex.align-items-center.pb-2.mb-1
a(href="#").d-block.flex-shrink-0
img(src="path-to-image", alt="Product", width="60").rounded
.ps-2.ms-1
h4.fs-md.nav-heading.mb-1
a(href="#").fw-medium
| Smart Watch Series 5
p.fs-sm.mb-0 $364.99
// Add as many items as you need
Featured entries: Carousel
Trending posts
Virtual Reality - game changing technology
by John Doe
New trends in suburban fashion
by Susan Mayer
Millenials is the top market for companies
by Daniel Adams
<!-- Featured entries: Carousel -->
<div class="widget">
<h3 class="widget-title">Trending posts</h3>
<div class="tns-carousel-wrapper pt-1">
<div class="tns-carousel-inner" data-carousel-options='{"controls": false, "gutter": 20}'>
<!-- Item -->
<div>
<div class="d-flex align-items-center">
<a class="d-block flex-shrink-0" href="#">
<img class="rounded" width="64" src="path-to-image" alt="Post"/>
</a>
<div class="ps-2 ms-1">
<h4 class="fs-md nav-heading mb-1">
<a class="fw-medium" href="#">Virtual Reality - game changing technology</a>
</h4>
<p class="fs-xs text-muted mb-0">by John Doe</p>
</div>
</div>
</div>
<!-- Item -->
<div>
<div class="d-flex align-items-center">
<a class="d-block flex-shrink-0" href="#">
<img class="rounded" width="64" src="path-to-image" alt="Post"/>
</a>
<div class="ps-2 ms-1">
<h4 class="fs-md nav-heading mb-1">
<a class="fw-medium" href="#">New trends in suburban fashion</a>
</h4>
<p class="fs-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
.widget
h3.widget-title Trending posts
.tns-carousel-wrapper.pt-1
.tns-carousel-inner(data-carousel-options='{"controls": false, "gutter": 20}')
// Items
div
.d-flex.align-items-center
a(href="#").d-block.flex-shrink-0
img(src="path-to-image", alt="Post", width="64").rounded
.ps-2.ms-1
h4.fs-md.nav-heading.mb-1
a(href="#").fw-medium
| Virtual Reality - game changing technology
p.fs-xs.text-muted.mb-0 by John Doe
// Item
div
.d-flex.align-items-center
a(href="#").d-block.flex-shrink-0
img(src="path-to-image", alt="Post", width="64").rounded
.ps-2.ms-1
h4.fs-md.nav-heading.mb-1
a(href="#").fw-medium
| New trends in suburban fashion
p.fs-xs.text-muted.mb-0 by Susan Mayer
// Add as many items as you need
Shopping cart
Your cart
Smart Watch Series 5
$364.99x
Running Sneakers, Collection
$145.00x
Wireless Bluethoothe Headset
$258.00x
Total:$776.99
Checkout
<!-- Widget: Shopping cart -->
<div class="widget">
<h3 class="widget-title pb-1">Your cart</h3>
<!-- Item -->
<div class="d-flex align-items-center mb-4">
<a class="d-block flex-shrink-0" href="#">
<img class="rounded" width="60" src="path-to-image" alt="Product"/>
</a>
<div class="w-100 ps-2 ms-1">
<div class="d-flex align-items-center justify-content-between">
<div class="me-3">
<h4 class="nav-heading fs-md mb-1">
<a class="fw-medium" href="#">Smart Watch Series 5</a>
</h4>
<div class="d-flex align-items-center fs-sm">
<span class="me-2">$364.99</span>
<span class="me-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="ps-3 border-start">
<a class="d-block text-danger text-decoration-none fs-xl" href="#" data-bs-toggle="tooltip" title="Remove">
<i class="ai-x-circle"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="d-flex align-items-center mb-4">
<a class="d-block flex-shrink-0" href="#">
<img class="rounded" width="60" src="path-to-image" alt="Product"/>
</a>
<div class="w-100 ps-2 ms-1">
<div class="d-flex align-items-center justify-content-between">
<div class="me-3">
<h4 class="nav-heading fs-md mb-1">
<a class="fw-medium" href="#">Running Sneakers, Collection</a>
</h4>
<div class="d-flex align-items-center fs-sm">
<span class="me-2">$145.00</span>
<span class="me-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="ps-3 border-start">
<a class="d-block text-danger text-decoration-none fs-xl" href="#" data-bs-toggle="tooltip" title="Remove">
<i class="ai-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 d-block w-100">
<i class="ai-credit-card fs-base me-2"></i>
Checkout
</a>
</div>// Widget: Shopping cart
.widget
h3.widget-title.pb-1 Your cart
// Item
.d-flex.align-items-center.mb-4
a(href="#").d-block.flex-shrink-0
img(src="path-to-image", alt="Product", width="60").rounded
.w-100.ps-2.ms-1
.d-flex.align-items-center.justify-content-between
.me-3
h4.nav-heading.fs-md.mb-1
a(href="#").fw-medium
| Smart Watch Series 5
.d-flex.align-items-center.fs-sm
span.me-2 $364.99
span.me-2 x
input(type="number", style="max-width: 3.5rem;", value="1").form-control.form-control-sm.px-2
.ps-3.border-start
a(href="#", data-bs-toggle="tooltip", title="Remove").d-block.text-danger.text-decoration-none.fs-xl
i.ai-x-circle
// Item
.d-flex.align-items-center.mb-4
a(href="#").d-block.flex-shrink-0
img(src="path-to-image", alt="Product", width="60").rounded
.w-100.ps-2.ms-1
.d-flex.align-items-center.justify-content-between
.me-3
h4.nav-heading.fs-md.mb-1
a(href="#").fw-medium
| Running Sneakers, Collection
.d-flex.align-items-center.fs-sm
span.me-2 $145.00
span.me-2 x
input(type="number", style="max-width: 3.5rem;", value="1").form-control.form-control-sm.px-2
.ps-3.border-start
a(href="#", data-bs-toggle="tooltip", title="Remove").d-block.text-danger.text-decoration-none.fs-xl
i.ai-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.d-block.w-100
i.ai-credit-card.fs-base.me-2
| Checkout
Tag cloud
<!-- Tag link -->
<a href="#" class="btn-tag">#business</a>// Tag link
a(href="#").btn-tag
| #business
Filter (checkboxes)
<!-- Widget: Filter (checkboxes) -->
<div class="widget">
<h3 class="widget-title">Brand</h3>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="adidas" checked>
<label class="form-check-label text-nav" for="adidas">
Adidas
<span class="fs-xs text-muted ms-2">425</span>
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="bilabong">
<label class="form-check-label text-nav" for="bilabong">
Bilabong
<span class="fs-xs text-muted ms-2">27</span>
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="klein">
<label class="form-check-label text-nav" for="klein">
Calvin Klein
<span class="fs-xs text-muted ms-2">365</span>
</label>
</div>
</div>// Widget: Filter (checkboxes)
.widget
h3.widget-title Brand
.form-check.mb-2
input(type="checkbox", id="adidas", checked).form-check-input
label(for="adidas").form-check-label.text-nav
| Adidas
span.fs-xs.text-muted.ms-2 425
.form-check.mb-2
input(type="checkbox", id="bilabong").form-check-input
label(for="bilabong").form-check-label.text-nav
| Bilabong
span.fs-xs.text-muted.ms-2 27
.form-check.mb-2
input(type="checkbox", id="klein").form-check-input
label(for="klein").form-check-label.text-nav
| Calvin Klein
span.fs-xs.text-muted.ms-2 365
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="ai-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.ai-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">
<h3 class="widget-title">Contact details</h3>
<div class="d-flex pb-3 border-bottom">
<i class="ai-map-pin fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Find us</span>
<a class="d-block nav-link-style fs-sm" href="#">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</div>
<div class="d-flex pt-2 pb-3 border-bottom">
<i class="ai-phone fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Call us</span>
<a class="d-block nav-link-style fs-sm" href="tel:+184725276533">+1 (847) 252 765 33</a>
</div>
</div>
<div class="d-flex pt-2">
<i class="ai-mail fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Write us</span>
<a class="d-block nav-link-style fs-sm" href="mailto:email@example.com">email@example.com</a>
</div>
</div>
</div>// Widget: Contact details
.widget
h3.widget-title Contact details
.d-flex.pb-3.border-bottom
i.ai-map-pin.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Find us
a(href="#").d-block.nav-link-style.fs-sm
| 769, Industrial Dr, West Chicago, IL 60185, USA
.d-flex.pt-2.pb-3.border-bottom
i.ai-phone.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Call us
a(href="tel:+184725276533").d-block.nav-link-style.fs-sm
| +1 (847) 252 765 33
.d-flex.pt-2
i.ai-mail.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Write us
a(href="mailto:email@example.com").d-block.nav-link-style.fs-sm
| email@example.com