Widgets
Collection of tiny components to use inside sidebar area.
Around 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="cs-widget">
<h3 class="cs-widget-title">Company</h3>
<ul>
<li class="active">
<a href="#" class="cs-widget-link">About us</a>
</li>
<li>
<a href="#" class="cs-widget-link">Our philosophy</a>
</li>
<li>
<a href="#" class="cs-widget-link">Success stories</a>
</li>
<li>
<a href="#" class="cs-widget-link">Careers</a>
</li>
<li>
<a href="#" class="cs-widget-link">Help center</a>
</li>
<li>
<a href="#" class="cs-widget-link">Contacts</a>
</li>
</ul>
</div>
// Widget: Links
.cs-widget
h3.cs-widget-title Company
ul
li.active
a.cs-widget-link(href="#") About us
li
a.cs-widget-link(href="#") Our philosophy
li
a.cs-widget-link(href="#") Success stories
li
a.cs-widget-link(href="#") Careers
li
a.cs-widget-link(href="#") Help center
li
a.cs-widget-link(href="#") Contacts
Categories
<!-- Widget: Collapsable categories -->
<div class="cs-widget cs-widget-categories">
<h3 class="cs-widget-title">Collapsable categories</h3>
<ul id="categories">
<li>
<a class="cs-widget-link" href="#clothing" data-toggle="collapse">
Clothing
<small class="text-muted pl-1 ml-2">235</small>
</a>
<ul class="collapse show" id="clothing" data-parent="#categories">
<li><a class="cs-widget-link" href="#">Blazers & Suits</a></li>
<li><a class="cs-widget-link" href="#">Cardigans</a></li>
<li><a class="cs-widget-link" href="#">Dresses</a></li>
</ul>
</li>
<li>
<a class="cs-widget-link collapsed" href="#shoes" data-toggle="collapse">
Shoes
<small class="text-muted pl-1 ml-2">210</small>
</a>
<ul class="collapse" id="shoes" data-parent="#categories">
<li><a class="cs-widget-link" href="#">Athletic shoes</a></li>
<li><a class="cs-widget-link" href="#">Balerinas & Flats</a></li>
<li><a class="cs-widget-link" href="#">Boots</a></li>
</ul>
</li>
<li>
<a class="cs-widget-link collapsed" href="#electronics" data-toggle="collapse">
Electronics
<small class="text-muted pl-1 ml-2">197</small>
</a>
<ul class="collapse" id="electronics" data-parent="#categories">
<li><a class="cs-widget-link" href="#">Computers & Accessories</a></li>
<li><a class="cs-widget-link" href="#">TV, Video & Audio</a></li>
<li><a class="cs-widget-link" href="#">Smartphones & Tablets</a></li>
</ul>
</li>
<li>
<a class="cs-widget-link collapsed" href="#accessories" data-toggle="collapse">
Accessories
<small class="text-muted pl-1 ml-2">124</small>
</a>
<ul class="collapse" id="accessories" data-parent="#categories">
<li><a class="cs-widget-link" href="#">Bags</a></li>
<li><a class="cs-widget-link" href="#">Belts</a></li>
<li><a class="cs-widget-link" href="#">Hats</a></li>
</ul>
</li>
</ul>
</div>
<!-- Widget: Static categories -->
<div class="cs-widget cs-widget-categories">
<h3 class="cs-widget-title">Static categories</h3>
<ul>
<li>
<a class="cs-widget-link" href="#">
Clothing
<small class="text-muted pl-1 ml-2">235</small>
</a>
</li>
<li>
<a class="cs-widget-link" href="#">
Shoes
<small class="text-muted pl-1 ml-2">210</small>
</a>
</li>
<li>
<a class="cs-widget-link" href="#">
Electronics
<small class="text-muted pl-1 ml-2">197</small>
</a>
<ul>
<li>
<a class="cs-widget-link" href="#">Computers & Accessories</a>
<ul>
<li><a class="cs-widget-link" href="#">Laptops & Tablets</a></li>
<li><a class="cs-widget-link" href="#">Desktop Computers</a></li>
<li><a class="cs-widget-link" href="#">Computer Accessories</a></li>
</ul>
</li>
<li><a class="cs-widget-link" href="#">TV, Video & Audio</a></li>
<li><a class="cs-widget-link" href="#">Cameras, Photo & Video</a></li>
<li>
<a class="cs-widget-link" href="#">Headphones</a>
<ul>
<li><a class="cs-widget-link" href="#">Earbuds</a></li>
<li><a class="cs-widget-link" href="#">Over-Ear</a></li>
<li><a class="cs-widget-link" href="#">Bluetooth</a></li>
</ul>
</li>
<li><a class="cs-widget-link" href="#">Wearable Electronics</a></li>
<li><a class="cs-widget-link" href="#">Printers & Ink</a></li>
</ul>
</li>
<li>
<a class="cs-widget-link" href="#">
Accessories
<small class="text-muted pl-1 ml-2">124</small>
</a>
</li>
<li>
<a class="cs-widget-link" href="#">
Entertainment
<small class="text-muted pl-1 ml-2">86</small>
</a>
</li>
</ul>
</div>
// Widget: Collapsable categories
.cs-widget.cs-widget-categories
h3.cs-widget-title Collapsable categories
ul#categories
li
a(href="#clothing", data-toggle="collapse").cs-widget-link
| Clothing
small.text-muted.pl-1.ml-2 235
ul#clothing.collapse.show(data-parent="#categories")
li
a.cs-widget-link(href="#") Blazers & Suits
li
a.cs-widget-link(href="#") Cardigans
li
a.cs-widget-link(href="#") Dresses
li
a(href="#shoes", data-toggle="collapse").cs-widget-link.collapsed
| Shoes
small.text-muted.pl-1.ml-2 210
ul#shoes.collapse(data-parent="#categories")
li
a.cs-widget-link(href="#") Athletic shoes
li
a.cs-widget-link(href="#") Balerinas & Flats
li
a.cs-widget-link(href="#") Boots
li
a(href="#electronics", data-toggle="collapse").cs-widget-link.collapsed
| Electronics
small.text-muted.pl-1.ml-2 197
ul#electronics.collapse(data-parent="#categories")
li
a.cs-widget-link(href="#") Computers & Accessories
li
a.cs-widget-link(href="#") TV, Video & Audio
li
a.cs-widget-link(href="#") Smartphones & Tablets
li
a(href="#accessories", data-toggle="collapse").cs-widget-link.collapsed
| Accessories
small.text-muted.pl-1.ml-2 124
ul#accessories.collapse(data-parent="#categories")
li
a.cs-widget-link(href="#") Bags
li
a.cs-widget-link(href="#") Belts
li
a.cs-widget-link(href="#") Hats
// Widget: Static categories
.cs-widget.cs-widget-categories
h3.cs-widget-title Static categories
ul
li
a(href="#").cs-widget-link
| Clothing
small.text-muted.pl-1.ml-2 235
li
a(href="#").cs-widget-link
| Shoes
small.text-muted.pl-1.ml-2 210
li
a(href="#").cs-widget-link
| Electronics
small.text-muted.pl-1.ml-2 197
ul
li
a.cs-widget-link(href="#") Computers & Accessories
ul
li
a.cs-widget-link(href="#") Laptops & Tablets
li
a.cs-widget-link(href="#") Desktop Computers
li
a.cs-widget-link(href="#") Computer Accessories
li
a.cs-widget-link(href="#") TV, Video & Audio
li
a.cs-widget-link(href="#") Cameras, Photo & Video
li
a.cs-widget-link(href="#") Headphones
ul
li
a.cs-widget-link(href="#") Earbuds
li
a.cs-widget-link(href="#") Over-Ear
li
a.cs-widget-link(href="#") Bluetooth
li
a.cs-widget-link(href="#") Wearable Electronics
li
a.cs-widget-link(href="#") Printers & Ink
li
a.cs-widget-link(href="#")
| Accessories
small.text-muted.pl-1.ml-2 124
li
a.cs-widget-link(href="#")
| Entertainment
small.text-muted.pl-1.ml-2 86
Range slider
<!-- Widget: Range slider -->
<div class="cs-widget">
<h3 class="cs-widget-title">Price range</h3>
<div class="cs-range-slider" data-start-min="250" data-start-max="680" data-min="0" data-max="1000" data-step="1">
<div class="cs-range-slider-ui"></div>
<div class="d-flex">
<div class="w-50 pr-2 mr-2">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input class="form-control cs-range-slider-value-min" type="text">
</div>
</div>
<div class="w-50 pl-2">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input class="form-control cs-range-slider-value-max" type="text">
</div>
</div>
</div>
</div>
</div>
// Widget: Range slider
.cs-widget
h3.cs-widget-title Price range
.cs-range-slider(data-start-min="250", data-start-max="680", data-min="0", data-max="1000", data-step="1")
.cs-range-slider-ui
.d-flex
.w-50.pr-2.mr-2
.input-group.input-group-sm
.input-group-prepend
span.input-group-text $
input(type="text").form-control.cs-range-slider-value-min
.w-50.pl-2
.input-group.input-group-sm
.input-group-prepend
span.input-group-text $
input(type="text").form-control.cs-range-slider-value-max
Featured entries: List
<!-- Featured entries: List -->
<div class="cs-widget">
<!-- Title -->
<div class="d-flex flex-wrap justify-content-between mb-4">
<h3 class="cs-widget-title mb-0 mr-3">New arrivals</h3>
<a class="font-size-sm font-weight-medium" href="#">
View more
<i class="fe-chevron-right font-size-lg"></i>
</a>
</div>
<!-- Item -->
<div class="media align-items-center pb-2 mb-1">
<a class="d-block" href="#">
<img class="rounded" width="60" src="path-to-image" alt="Product"/>
</a>
<div class="media-body pl-2 ml-1">
<h4 class="font-size-md nav-heading mb-1">
<a class="font-weight-medium" href="#">Block-colored Hooded Top</a>
</h4>
<p class="font-size-sm mb-0">$27.50</p>
</div>
</div>
<!-- Item -->
<div class="media align-items-center pb-2 mb-1">
<a class="d-block" href="#">
<img class="rounded" width="60" src="path-to-image" alt="Product"/>
</a>
<div class="media-body pl-2 ml-1">
<h4 class="font-size-md nav-heading mb-1">
<a class="font-weight-medium" href="#">Smart Watch Series 5</a>
</h4>
<p class="font-size-sm mb-0">$364.99</p>
</div>
</div>
<!-- Add as many items as you need -->
</div>
// Featured entries: List
.cs-widget
// Title
.d-flex.flex-wrap.justify-content-between.mb-4
h3.cs-widget-title.mb-0.mr-3 New arrivals
a(href="#").font-size-sm.font-weight-medium
| View more
i.fe-chevron-right.font-size-lg
// Item
.media.align-items-center.pb-2.mb-1
a(href="#").d-block
+image("path-to-image", "Product")(width="60").rounded
.media-body.pl-2.ml-1
h4.font-size-md.nav-heading.mb-1
a(href="#").font-weight-medium
| Block-colored Hooded Top
p.font-size-sm.mb-0 $27.50
// Item
.media.align-items-center.pb-2.mb-1
a(href="#").d-block
+image("path-to-image", "Product")(width="60").rounded
.media-body.pl-2.ml-1
h4.font-size-md.nav-heading.mb-1
a(href="#").font-weight-medium
| Smart Watch Series 5
p.font-size-sm.mb-0 $364.99
// Add as many items as you need
Featured entries: Carousel
<!-- Featured entries: Carousel -->
<div class="cs-widget">
<h3 class="cs-widget-title">Trending posts</h3>
<div class="cs-carousel pt-1">
<div class="cs-carousel-inner" data-carousel-options='{"controls": false, "gutter": 20}'>
<!-- Item -->
<div>
<div class="media align-items-center"><a class="d-block" href="#">
<img class="rounded" width="64" src="path-to-image" alt="Post"/>
</a>
<div class="media-body pl-2 ml-1">
<h4 class="font-size-md nav-heading mb-1">
<a class="font-weight-medium" href="#">Virtual Reality - game changing technology</a>
</h4>
<p class="font-size-xs text-muted mb-0">by John Doe</p>
</div>
</div>
</div>
<!-- Item -->
<div>
<div class="media align-items-center">
<a class="d-block" href="#">
<img class="rounded" width="64" src="path-to-image" alt="Post"/>
</a>
<div class="media-body pl-2 ml-1">
<h4 class="font-size-md nav-heading mb-1">
<a class="font-weight-medium" href="#">New trends in suburban fashion</a>
</h4>
<p class="font-size-xs text-muted mb-0">by Susan Mayer</p>
</div>
</div>
</div>
<!-- Add as many items as you need -->
</div>
</div>
</div>
// Featured entries: Carousel
.cs-widget
h3.cs-widget-title Trending posts
.cs-carousel.pt-1
.cs-carousel-inner(data-carousel-options='{"controls": false, "gutter": 20}')
// Items
div
.media.align-items-center
a(href="#").d-block
+image("path-to-image", "Post")(width="64").rounded
.media-body.pl-2.ml-1
h4.font-size-md.nav-heading.mb-1
a(href="#").font-weight-medium
| Virtual Reality - game changing technology
p.font-size-xs.text-muted.mb-0 by John Doe
// Item
div
.media.align-items-center
a(href="#").d-block
+image("path-to-image", "Post")(width="64").rounded
.media-body.pl-2.ml-1
h4.font-size-md.nav-heading.mb-1
a(href="#").font-weight-medium
| New trends in suburban fashion
p.font-size-xs.text-muted.mb-0 by Susan Mayer
// Add as many items as you need
Shopping cart
<!-- Widget: Shopping cart -->
<div class="cs-widget">
<h3 class="cs-widget-title pb-1">Your cart</h3>
<!-- Item -->
<div class="media align-items-center mb-4">
<a class="d-block" href="#">
<img class="rounded" width="60" src="path-to-image" alt="Product"/>
</a>
<div class="media-body pl-2 ml-1">
<div class="d-flex align-items-center justify-content-between">
<div class="mr-3">
<h4 class="nav-heading font-size-md mb-1">
<a class="font-weight-medium" href="#">Smart Watch Series 5</a>
</h4>
<div class="d-flex align-items-center font-size-sm">
<span class="mr-2">$364.99</span>
<span class="mr-2">x</span>
<input class="form-control form-control-sm px-2" type="number" style="max-width: 3.5rem;" value="1">
</div>
</div>
<div class="pl-3 border-left">
<a class="d-block text-danger text-decoration-none font-size-xl" href="#" data-toggle="tooltip" title="Remove">
<i class="fe-x-circle"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="media align-items-center mb-4">
<a class="d-block" href="#">
<img class="rounded" width="60" src="path-to-image" alt="Product"/>
</a>
<div class="media-body pl-2 ml-1">
<div class="d-flex align-items-center justify-content-between">
<div class="mr-3">
<h4 class="nav-heading font-size-md mb-1">
<a class="font-weight-medium" href="#">Running Sneakers, Collection</a>
</h4>
<div class="d-flex align-items-center font-size-sm">
<span class="mr-2">$145.00</span>
<span class="mr-2">x</span>
<input class="form-control form-control-sm px-2" type="number" style="max-width: 3.5rem;" value="1">
</div>
</div>
<div class="pl-3 border-left">
<a class="d-block text-danger text-decoration-none font-size-xl" href="#" data-toggle="tooltip" title="Remove">
<i class="fe-x-circle"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Totals -->
<hr class="mb-4"/>
<div class="d-flex justify-content-between mb-4">
<span>Total:</span>
<span class="h6 mb-0">$776.99</span>
</div>
<a href="#" class="btn btn-primary btn-sm btn-block">
<i class="fe-credit-card font-size-base mr-2"></i>
Checkout
</a>
</div>
// Widget: Shopping cart
.cs-widget
h3.cs-widget-title.pb-1 Your cart
// Item
.media.align-items-center.mb-4
a(href="#").d-block
+image("path-to-image", "Product")(width="60").rounded
.media-body.pl-2.ml-1
.d-flex.align-items-center.justify-content-between
.mr-3
h4.nav-heading.font-size-md.mb-1
a(href="#").font-weight-medium
| Smart Watch Series 5
.d-flex.align-items-center.font-size-sm
span.mr-2 $364.99
span.mr-2 x
input(type="number", style="max-width: 3.5rem;", value="1").form-control.form-control-sm.px-2
.pl-3.border-left
a(href="#", data-toggle="tooltip", title="Remove").d-block.text-danger.text-decoration-none.font-size-xl
i.fe-x-circle
// Item
.media.align-items-center.mb-4
a(href="#").d-block
+image("path-to-image", "Product")(width="60").rounded
.media-body.pl-2.ml-1
.d-flex.align-items-center.justify-content-between
.mr-3
h4.nav-heading.font-size-md.mb-1
a(href="#").font-weight-medium
| Running Sneakers, Collection
.d-flex.align-items-center.font-size-sm
span.mr-2 $145.00
span.mr-2 x
input(type="number", style="max-width: 3.5rem;", value="1").form-control.form-control-sm.px-2
.pl-3.border-left
a(href="#", data-toggle="tooltip", title="Remove").d-block.text-danger.text-decoration-none.font-size-xl
i.fe-x-circle
// Totals
hr.mb-4
.d-flex.justify-content-between.mb-4
span Total:
span.h6.mb-0 $776.99
a(href="#").btn.btn-primary.btn-sm.btn-block
i.fe-credit-card.font-size-base.mr-2
| Checkout
Tag cloud
<!-- Tag link -->
<a href="#" class="cs-tag">#business</a>
// Tag link
a(href="#").cs-tag
| #business
Filter (checkboxes)
<!-- Widget: Filter (checkboxes) -->
<div class="cs-widget">
<h3 class="cs-widget-title">Brand</h3>
<div class="custom-control custom-checkbox mb-2">
<input class="custom-control-input" type="checkbox" id="adidas" checked>
<label class="custom-control-label text-nav" for="adidas">
Adidas
<span class="font-size-xs text-muted ml-2">425</span>
</label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input class="custom-control-input" type="checkbox" id="bilabong">
<label class="custom-control-label text-nav" for="bilabong">
Bilabong
<span class="font-size-xs text-muted ml-2">27</span>
</label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input class="custom-control-input" type="checkbox" id="klein">
<label class="custom-control-label text-nav" for="klein">
Calvin Klein
<span class="font-size-xs text-muted ml-2">365</span>
</label>
</div>
</div>
// Widget: Filter (checkboxes)
.cs-widget
h3.cs-widget-title Brand
.custom-control.custom-checkbox.mb-2
input(type="checkbox", id="adidas", checked).custom-control-input
label(for="adidas").custom-control-label.text-nav
| Adidas
span.font-size-xs.text-muted.ml-2 425
.custom-control.custom-checkbox.mb-2
input(type="checkbox", id="bilabong").custom-control-input
label(for="bilabong").custom-control-label.text-nav
| Bilabong
span.font-size-xs.text-muted.ml-2 27
.custom-control.custom-checkbox.mb-2
input(type="checkbox", id="klein").custom-control-input
label(for="klein").custom-control-label.text-nav
| Calvin Klein
span.font-size-xs.text-muted.ml-2 365
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 "cs-subscribe-form-antispam"
-->
<div class="cs-widget">
<h3 class="cs-widget-title">Subscribe</h3>
<form class="cs-subscribe-form validate" action="mailchimp-embedded-form-atcion-link" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<div class="input-group input-group-overlay flex-nowrap">
<div class="input-group-prepend-overlay">
<span class="input-group-text text-muted">
<i class="fe-mail"></i>
</span>
</div>
<input class="form-control prepended-form-control" type="email" name="EMAIL" placeholder="Your email">
<div class="input-group-append">
<button class="btn btn-primary" type="submit" name="subscribe">Subscribe*</button>
</div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input class="cs-subscribe-form-antispam" type="text" name="mailchimp-embedded-form-antispam-name-attribute" tabindex="-1">
</div>
<small class="form-text text-muted">*Subscribe to our newsletter to receive early discount offers, updates and new products info.</small>
<div class="cs-subscribe-status"></div>
</form>
</div>
// Widget: Subscription (MailChimp Ajax)
// Instructions how to get MailChimp action link:
// 1. Log in to your MailChimp Dashboard / Audience / Manage Audience / Signup forms / Embedded forms
// 2. In the provided code find form action link and copy it
// 3. Paste it to the form action attribute below
// 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 "cs-subscribe-form-antispam"
.cs-widget
h3.cs-widget-title Subscribe
form(action="mailchimp-embedded-form-atcion-link", method="post", name="mc-embedded-subscribe-form", target="_blank", novalidate).cs-subscribe-form.validate
.input-group.input-group-overlay.flex-nowrap
.input-group-prepend-overlay
span.input-group-text.text-muted
i.fe-mail
input(type="email", name="EMAIL", placeholder="Your email").form-control.prepended-form-control
.input-group-append
button(type="submit", name="subscribe").btn.btn-primary Subscribe*
// real people should not fill this in and expect good things - do not remove this or risk form bot signups
div(style="position: absolute;, left: -5000px;", aria-hidden="true")
input(type="text", name="mailchimp-embedded-form-antispam-name-attribute", tabindex="-1").cs-subscribe-form-antispam
small.form-text.text-muted *Subscribe to our newsletter to receive early discount offers, updates and new products info.
.cs-subscribe-status
Contact details
<!-- Widget: Contact details -->
<div class="cs-widget">
<h3 class="cs-widget-title">Contact details</h3>
<div class="media pb-3 border-bottom">
<i class="fe-map-pin font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Find us</span>
<a class="d-block nav-link-style font-size-sm" href="#">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</div>
<div class="media pt-2 pb-3 border-bottom">
<i class="fe-phone font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Call us</span>
<a class="d-block nav-link-style font-size-sm" href="tel:+184725276533">+1 (847) 252 765 33</a>
</div>
</div>
<div class="media pt-2">
<i class="fe-mail font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Write us</span>
<a class="d-block nav-link-style font-size-sm" href="mailto:email@example.com">email@example.com</a>
</div>
</div>
</div>
// Widget: Contact details
.cs-widget
h3.cs-widget-title Contact details
.media.pb-3.border-bottom
i.fe-map-pin.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Find us
a(href="#").d-block.nav-link-style.font-size-sm
| 769, Industrial Dr, West Chicago, IL 60185, USA
.media.pt-2.pb-3.border-bottom
i.fe-phone.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Call us
a(href="tel:+184725276533").d-block.nav-link-style.font-size-sm
| +1 (847) 252 765 33
.media.pt-2
i.fe-mail.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Write us
a(href="mailto:email@example.com").d-block.nav-link-style.font-size-sm
| email@example.com