Widgets

HTML
Pug

<!-- Search Widget -->
<div class="widget">
  <h4 class="widget-title">Search</h4>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <i class="fe-icon-search"></i>
      </div>
    </div>
    <input class="form-control" type="text" placeholder="Search site...">
  </div>
</div>

<!-- Custom Menu Widget -->
<div class="widget widget-custom-menu">
  <h4 class="widget-title">Custom menu</h4>
  <ul>
    <li><a href="#about" data-toggle="collapse">About Us</a>
      <div class="collapse show" id="about">
        <ul>
          <li><a href="#">Our mission</a></li>
          <li><a href="#">Our team</a></li>
          <li><a href="#">We are hiring</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">Privacy Policy</a></li>
    <li><a class="collapsed" href="#help" data-toggle="collapse">Help &amp; Info</a>
      <div class="collapse" id="help">
        <ul>
          <li><a href="#">Help center</a></li>
          <li><a href="#">Support</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">Terms &amp; Conditions</a></li>
  </ul>
</div>

<!-- Gallery V.1 Widget -->
<div class="widget widget-gallery">
  <h4 class="widget-title">Gallery v.1</h4>
  <div class="d-flex justify-content-between">
    <a class="gallery-item mb-2 mr-2" href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}'>
      <img src="path-to-thumbnail-image" alt="Gallery Image"/>
    </a>
    <a class="gallery-item mb-2 mr-2" href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}'>
      <img src="path-to-thumbnail-image" alt="Gallery Image"/>
    </a>
    <a class="gallery-item type-video mb-2" href="https://www.youtube.com/watch?v=VideoID&amp;amp;autoplay=1&amp;amp;rel=0&amp;amp;controls=0&amp;amp;showinfo=0" data-fancybox="gallery1" data-width="1000" data-height="563">
      <img src="path-to-thumbnail-image" alt="Gallery Image"/>
    </a>
  </div>
  <div class="d-flex justify-content-between">
    <a class="gallery-item mb-2 mr-2" href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}'>
      <img src="path-to-thumbnail-image" alt="Gallery Image"/>
    </a>
    <a class="gallery-item type-video mb-2 mr-2" href="https://vimeo.com/VideoID?color=ac32e4" data-fancybox="gallery1" data-width="1000" data-height="563">
      <img src="path-to-thumbnail-image" alt="Gallery Image"/>
    </a>
    <a class="gallery-item mb-2" href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}'>
      <img src="path-to-thumbnail-image" alt="Gallery Image"/>
    </a>
  </div>
  <div class="pt-1">
    <a class="btn btn-gradient btn-block" href="#">
      <i class="fe-icon-instagram"></i>
      &nbsp;View our Instagram
    </a>
  </div>
</div>

<!-- Gallery V.2 Widget -->
<div class="widget widget-gallery">
  <h4 class="widget-title">Gallery v.1</h4>
  <div class="d-flex justify-content-between">
    <a class="gallery-item" href="path-to-big-image" data-fancybox="gallery2" data-options='{"caption": "Gallery Image Caption"}'>
      <img src="path-to-thumbnail-image" alt="Gallery Image"/>
    </a>
    <a class="gallery-item" href="path-to-big-image" data-fancybox="gallery2" data-options='{"caption": "Gallery Image Caption"}'>
      <img src="path-to-thumbnail-image" alt="Gallery Image"/>
    </a>
    <a class="gallery-item type-video" href="https://www.youtube.com/watch?v=VideoID&amp;amp;autoplay=1&amp;amp;rel=0&amp;amp;controls=0&amp;amp;showinfo=0" data-fancybox="gallery2" data-width="1000" data-height="563">
      <img src="path-to-thumbnail-image" alt="Gallery Image"/>
    </a>
  </div>
  <div class="d-flex justify-content-between">
    <a class="gallery-item" href="path-to-big-image" data-fancybox="gallery2" data-options='{"caption": "Gallery Image Caption"}'>
      <img src="path-to-thumbnail-image" alt="Gallery Image"/>
    </a>
    <a class="gallery-item type-video" href="https://vimeo.com/VideoID?color=ac32e4" data-fancybox="gallery2" data-width="1000" data-height="563">
      <img src="path-to-thumbnail-image" alt="Gallery Image"/>
    </a>
    <a class="gallery-item" href="path-to-big-image" data-fancybox="gallery2" data-options='{"caption": "Gallery Image Caption"}'>
      <img src="path-to-thumbnail-image" alt="Gallery Image"/>
    </a>
  </div>
  <div class="pt-2">
    <a class="btn btn-gradient btn-block" href="#">
      <i class="fe-icon-instagram"></i>
      &nbsp;View our Instagram
    </a>
  </div>
</div>

<!-- Contacts V.1 Widget -->
<div class="widget widget-contacts">
  <h4 class="widget-title">Contacts v.1</h4>
  <ul>
    <li>
      <i class="fe-icon-map-pin"></i>
      <span>Find us</span>
      <a href="https://www.google.com/maps/place/1260+Broadway,+New+York,+NY+10001,+USA/@40.7483811,-73.9898009,17z/data=!3m1!4b1!4m5!3m4!1s0x89c259a920a0a5fb:0xa4329a8e21872659!8m2!3d40.7483811!4d-73.9876122" target="_blank">1260 Broadway, New York</a>
    </li>
    <li>
      <i class="fe-icon-phone"></i>
      <span>Call us</span>
      <a href="tel:00180039025">001 800 390 25</a>
    </li>
    <li>
      <i class="fe-icon-mail"></i>
      <span>Write us</span>
      <a href="mailto:info@example.com">info@example.com</a>
    </li>
  </ul>
</div>

<!-- Contacts V.2 Widget -->
<div class="widget widget-contacts">
  <h4 class="widget-title">Contacts v.1</h4>
  <ul>
    <li>
      <i class="fe-icon-map-pin icon-style-2"></i>
      <span>Find us</span>
      <a href="https://www.google.com/maps/place/1260+Broadway,+New+York,+NY+10001,+USA/@40.7483811,-73.9898009,17z/data=!3m1!4b1!4m5!3m4!1s0x89c259a920a0a5fb:0xa4329a8e21872659!8m2!3d40.7483811!4d-73.9876122" target="_blank">1260 Broadway, New York</a>
    </li>
    <li>
      <i class="fe-icon-phone icon-style-2"></i>
      <span>Call us</span>
      <a href="tel:00180039025">001 800 390 25</a>
    </li>
    <li>
      <i class="fe-icon-mail icon-style-2"></i>
      <span>Write us</span>
      <a href="mailto:info@example.com">info@example.com</a>
    </li>
  </ul>
</div>

<!-- Subscription (MailChimp) Widget -->
<div class="widget widget-subscribe">
  <h4 class="widget-title">Subscription</h4>
  <form action="link-to-your-mailchimp-subscription-list" method="post" target="_blank" novalidate>
    <div class="input-group">
      <input class="form-control" type="email" name="EMAIL" placeholder="Email address">
      <div class="input-group-append">
        <button class="btn btn-primary" type="submit">Sign Up</button>
      </div>
    </div>
    <small class="form-text text-muted pt-1">Enter email to receive a newsletter about new products and updates</small>
    <!-- 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="b_c7103e2c981361a6639545bd5_1194bb7544" tabindex="-1">
    </div>
  </form>
</div>

<!-- Google Map Widget -->
<div class="widget">
  <h4 class="widget-title">Google map</h4>
  <div class="google-map" data-height="200" data-address="New York, USA" data-zoom="9" data-disable-controls="true" data-scrollwheel="true" data-marker="path-to-image" data-marker-title="We are here!"></div>
</div>

<!-- Image Carousel Widget -->
<div class="widget">
  <h4 class="widget-title">Image carousel</h4>
  <div class="owl-carousel" data-owl-carousel='{ "nav": false, "dots": true }'>
    <img src="path-to-image" alt="Image"/>
    <img src="path-to-image" alt="Image"/>
    <img src="path-to-image" alt="Image"/>
  </div>
</div>

<!-- Testimonials Carousel Widget -->
<div class="widget widget-testimonials-carousel">
  <h4 class="widget-title">Testimonials carousel</h4>
  <div class="owl-carousel" data-owl-carousel='{ "nav": false, "dots": true, "loop": true }'>
    <div class="blockquote testimonial">...</div>
    <div class="blockquote testimonial">...</div>
    <div class="blockquote testimonial">...</div>
  </div>
</div>

<!-- Social Networks Widget -->
<div class="widget">
  <h4 class="widget-title">Social networks</h4>
  <a class="social-btn sb-style-6 sb-facebook" href="#" data-toggle="tooltip" data-placement="top" title="Facebook">
    <i class="socicon-facebook"></i>
  </a>
  <a class="social-btn sb-style-6 sb-dribbble" href="#" data-toggle="tooltip" data-placement="top" title="Dribbble">
    <i class="socicon-dribbble"></i>
  </a>
  <a class="social-btn sb-style-6 sb-twitter" href="#" data-toggle="tooltip" data-placement="top" title="Twitter">
    <i class="socicon-twitter"></i>
  </a>
</div>

<!-- CTA Button Widget -->
<div class="widget">
  <h4 class="widget-title">CTA Button</h4>
  <a class="btn btn-style-2 btn-primary btn-block" href="#">Call to Action</a>
  <small class="form-text text-muted pt-2">Some description goes here to convince the user to click this button.</small>
</div>

//- Search Widget
.widget
  h4.widget-title Search
  .input-group
    .input-group-prepend
      .input-group-text
        i.fe-icon-search
    input(type="text" placeholder="Search site...").form-control

//- Custom Menu Widget
.widget.widget-custom-menu
  h4.widget-title Custom menu
  ul
    li
      a(href="#about" data-toggle="collapse") About Us
      #about.collapse.show
        ul
          li: a(href="#") Our mission
          li: a(href="#") Our team
          li: a(href="#") We are hiring
    li: a(href="#") Privacy Policy
    li
      a(href="#help" data-toggle="collapse").collapsed Help & Info
      #help.collapse
        ul
          li: a(href="#") Help center
          li: a(href="#") Support
    li: a(href="#") Terms & Conditions

//- Gallery V.1 Widget
.widget.widget-gallery
  h4.widget-title Gallery v.1
  .d-flex.justify-content-between
    a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item.mb-2.mr-2
      +image("path-to-thumbnail-image", "Gallery Image")
    a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item.mb-2.mr-2
      +image("path-to-thumbnail-image", "Gallery Image")
    a(href="https://www.youtube.com/watch?v=VideoID&autoplay=1&rel=0&controls=0&showinfo=0" data-fancybox="gallery1" data-width="1000" data-height="563").gallery-item.type-video.mb-2
      +image("path-to-thumbnail-image", "Gallery Image")
  .d-flex.justify-content-between
    a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item.mb-2.mr-2
      +image("path-to-thumbnail-image", "Gallery Image")
    a(href="https://vimeo.com/VideoID?color=ac32e4" data-fancybox="gallery1" data-width="1000" data-height="563").gallery-item.type-video.mb-2.mr-2
      +image("path-to-thumbnail-image", "Gallery Image")
    a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item.mb-2
      +image("path-to-thumbnail-image", "Gallery Image")
  .pt-1
    a(href="#").btn.btn-gradient.btn-block
      i.fe-icon-instagram
      | &nbsp;View our Instagram

//- Gallery V.2 Widget
.widget.widget-gallery
  h4.widget-title Gallery v.1
  .d-flex.justify-content-between
    a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item
      +image("path-to-thumbnail-image", "Gallery Image")
    a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item
      +image("path-to-thumbnail-image", "Gallery Image")
    a(href="https://www.youtube.com/watch?v=VideoID&autoplay=1&rel=0&controls=0&showinfo=0" data-fancybox="gallery1" data-width="1000" data-height="563").gallery-item.type-video
      +image("path-to-thumbnail-image", "Gallery Image")
  .d-flex.justify-content-between
    a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item
      +image("path-to-thumbnail-image", "Gallery Image")
    a(href="https://vimeo.com/VideoID?color=ac32e4" data-fancybox="gallery1" data-width="1000" data-height="563").gallery-item.type-video
      +image("path-to-thumbnail-image", "Gallery Image")
    a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item
      +image("path-to-thumbnail-image", "Gallery Image")
  .pt-2
    a(href="#").btn.btn-gradient.btn-block
      i.fe-icon-instagram
      | &nbsp;View our Instagram

//- Contacts V.1 Widget
.widget.widget-contacts
  h4.widget-title Contacts v.1
  ul
    li
      i.fe-icon-map-pin
      span Find us
      a(href="https://www.google.com/maps/place/1260+Broadway,+New+York,+NY+10001,+USA/@40.7483811,-73.9898009,17z/data=!3m1!4b1!4m5!3m4!1s0x89c259a920a0a5fb:0xa4329a8e21872659!8m2!3d40.7483811!4d-73.9876122" target="_blank") 1260 Broadway, New York
    li
      i.fe-icon-phone
      span Call us
      a(href="tel:00180039025") 001 800 390 25
    li
      i.fe-icon-mail
      span Write us
      a(href="mailto:info@example.com") info@example.com

//- Contacts V.2 Widget
.widget.widget-contacts
  h4.widget-title Contacts v.1
  ul
    li
      i.fe-icon-map-pin.icon-style-2
      span Find us
      a(href="https://www.google.com/maps/place/1260+Broadway,+New+York,+NY+10001,+USA/@40.7483811,-73.9898009,17z/data=!3m1!4b1!4m5!3m4!1s0x89c259a920a0a5fb:0xa4329a8e21872659!8m2!3d40.7483811!4d-73.9876122" target="_blank") 1260 Broadway, New York
    li
      i.fe-icon-phone.icon-style-2
      span Call us
      a(href="tel:00180039025") 001 800 390 25
    li
      i.fe-icon-mail.icon-style-2
      span Write us
      a(href="mailto:info@example.com") info@example.com

//- Subscription (MailChimp) Widget
.widget.widget-subscribe
  h4.widget-title Subscription
  form(action="link-to-your-mailchimp-subscription-list" method="post" target="_blank" novalidate)
    .input-group
      input(type="email" name="EMAIL" placeholder="Email address").form-control
      .input-group-append
        button(type="submit").btn.btn-primary Sign Up
    small.form-text.text-muted.pt-1 Enter email to receive a newsletter about new products and updates
    // 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="b_c7103e2c981361a6639545bd5_1194bb7544" tabindex="-1")

//- Google Map Widget
.widget
  h4.widget-title Google map
  .google-map(
    data-height = "200",
    data-address = "New York, USA",
    data-zoom = "9",
    data-disable-controls = "true",
    data-scrollwheel = "true",
    data-marker = "path-to-image",
    data-marker-title = "We are here!"
  )

//- Image Carousel Widget
.widget
  h4.widget-title Image carousel
  .owl-carousel(data-owl-carousel='{  "nav ": false,  "dots ": true }')
    +image( "path-to-image", "Image ")
    +image( "path-to-image", "Image ")
    +image( "path-to-image", "Image ")

//- Testimonials Carousel Widget
.widget.widget-testimonials-carousel
  h4.widget-title Testimonials carousel
  .owl-carousel(data-owl-carousel='{ "nav": false, "dots": true, "loop": true }')
    .blockquote.testimonial ...
    .blockquote.testimonial ...
    .blockquote.testimonial ...

//- Social Networks Widget
.widget
  h4.widget-title Social networks
  a(href="#" data-toggle="tooltip" data-placement="top" title="Facebook").social-btn.sb-style-6.sb-facebook
    i.socicon-facebook
  a(href="#" data-toggle="tooltip" data-placement="top" title="Dribbble").social-btn.sb-style-6.sb-dribbble
    i.socicon-dribbble
  a(href="#" data-toggle="tooltip" data-placement="top" title="Twitter").social-btn.sb-style-6.sb-twitter
    i.socicon-twitter

//- CTA Button Widget
.widget
  h4.widget-title CTA Button
  a(href="#").btn.btn-style-2.btn-primary.btn-block Call to Action
  small.form-text.text-muted.pt-2 Some description goes here to convince the user to click this button.

HTML
Pug

<!-- Author Widget -->
<div class="widget widget-author">
  <h4 class="widget-title">About author</h4>
  <div class="author-card">
    <div class="author-card-cover" style="background-image: url(path-to-cover-image);"></div>
    <div class="author-card-profile">
      <div class="author-card-avatar">
        <img src="path-to-author-image" alt="Post Author"/>
      </div>
      <div class="author-card-details">
        <h5 class="author-card-name">Sara Palson</h5>
        <span class="author-card-position">Marketing Director</span>
      </div>
    </div>
    <p class="author-card-info">Sed ut perspiciatis unde omnis...</p>
    <div class="author-card-social-bar-wrap">
      <div class="author-card-social-bar">
        <a class="social-btn sb-style-1 sb-facebook" href="#"><i class="socicon-facebook"></i></a>
        <a class="social-btn sb-style-1 sb-pinterest" href="#"><i class="socicon-pinterest"></i></a>
        <a class="social-btn sb-style-1 sb-twitter" href="#"><i class="socicon-twitter"></i></a>
        <a class="social-btn sb-style-1 sb-linkedin" href="#"><i class="socicon-linkedin"></i></a>
      </div>
    </div>
  </div>
</div>

<!-- Blog Categories Widget -->
<div class="widget widget-categories">
  <h4 class="widget-title">Blog categories</h4>
  <ul>
    <li>
      <a href="#technology" data-toggle="collapse">Software &amp; Technology<span>&nbsp;(45)</span></a>
      <div class="collapse show" id="technology">
        <ul>
          <li>
            <a href="#">Gadgets reviews<span>&nbsp;(22)</span></a>
          </li>
          <li>
            <a href="#">Robotics &amp; AI<span>&nbsp;(10)</span></a>
          </li>
          <li>
            <a href="#">Technological trends<span>&nbsp;(13)</span></a>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <a href="#">Marketing &amp; Management<span>&nbsp;(24)</span></a>
    </li>
    <li>
      <a href="#">Hobby &amp; Lifestyle<span>&nbsp;(18)</span></a>
    </li>
  </ul>
</div>

<!-- Archives Widget -->
<div class="widget widget-categories">
  <h4 class="widget-title">Archives</h4>
  <ul>
    <li>
      <a href="#">
        <i class="fe-icon-book text-muted"></i>
        August 2018
        <span>&nbsp;(34)</span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fe-icon-book text-muted"></i>
        July 2018
        <span>&nbsp;(28)</span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fe-icon-book text-muted"></i>
        June 2018
        <span>&nbsp;(47)</span>
      </a>
    </li>
  </ul>
</div>

<!-- Recent Posts. List Widget -->
<div class="widget widget-featured-posts">
  <h4 class="widget-title"> Recent posts. List</h4>
  <a class="featured-post" href="#">
    <div class="featured-post-thumb">
      <img src="path-to-image" alt="Post Thumbnail"/>
    </div>
    <div class="featured-post-info">
      <div class="featured-post-meta">
        <span class="text-primary opacity-70">
          <i class="fe-icon-clock"></i>
          22/04/2018
        </span>
        <span class="ml-3">
          <i class="fe-icon-message-square"></i>
          21
        </span>
      </div>
      <div class="featured-post-title">Getting to another level of design and functionality.</div>
    </div>
  </a>
  <a class="featured-post" href="#">...</a>
  <a class="featured-post" href="#">...</a>
</div>

<!-- Recent Posts. Carousel Widget -->
<div class="widget widget-featured-posts-carousel">
  <h4 class="widget-title">Recent posts. Carousel</h4>
  <div class="owl-carousel" data-owl-carousel='{ "nav": false, "dots": true, "margin": 10, "loop": true }'>
    <a class="featured-post" href="#">
      <div class="featured-post-thumb">
        <img src="path-to-image" alt="Post Thumbnail"/>
      </div>
      <div class="featured-post-info">
        <div class="featured-post-meta">
          <span class="text-primary opacity-70">
            <i class="fe-icon-clock"></i>
            22/04/2018
          </span>
          <span class="ml-3">
            <i class="fe-icon-message-square"></i>
            21
          </span>
        </div>
        <div class="featured-post-title">Getting to another level of design and functionality.</div>
      </div>
    </a>
    <a class="featured-post" href="#">...</a>
    <a class="featured-post" href="#">...</a>
  </div>
</div>

<!-- Recent Comments Widget -->
<div class="widget widget-recent-comments">
  <h4 class="widget-title">Recent comments</h4>
  <a class="recent-comment" href="#">
    <span class="recent-comment-meta">Jane Portman on</span>
    <div class="recent-comment-title">The App of The Future</div>
  </a>
  <a class="recent-comment" href="#">
    <span class="recent-comment-meta">William Smith on</span>
    <div class="recent-comment-title">Cherry 5 WordPress Framework</div>
  </a>
  <a class="recent-comment" href="#">
    <span class="recent-comment-meta">Emma Johnson on</span>
    <div class="recent-comment-title">Another Level of Design</div>
  </a>
</div>

<!-- Tag Cloud Widget -->
<div class="widget">
  <h4 class="widget-title">Tag cloud</h4>
  <a class="tag-link" href="#">Technology</a>
  <a class="tag-link" href="#">Software</a>
  <a class="tag-link" href="#">Croudfunding</a>
  <a class="tag-link" href="#">Social</a>
  <a class="tag-link active" href="#">Freelance</a>
</div>

//- Author Widget
.widget.widget-author
  h4.widget-title About author
  .author-card
    .author-card-cover(style="background-image: url(path-to-cover-image);")
    .author-card-profile
      .author-card-avatar
        +image("path-to-author-image", "Post Author")
      .author-card-details
        h5.author-card-name Sara Palson
        span.author-card-position Marketing Director
    p.author-card-info Sed ut perspiciatis unde omnis...
    .author-card-social-bar-wrap
      .author-card-social-bar
        a(href="#").social-btn.sb-style-1.sb-facebook
          i.socicon-facebook
        a(href="#").social-btn.sb-style-1.sb-pinterest
          i.socicon-pinterest
        a(href="#").social-btn.sb-style-1.sb-twitter
          i.socicon-twitter
        a(href="#").social-btn.sb-style-1.sb-linkedin
          i.socicon-linkedin

//- Blog Categories Widget
.widget.widget-categories
  h4.widget-title Blog categories
  ul
    li
      a(href="#technology" data-toggle="collapse")
        | Software & Technology
        span &nbsp;(45)
      #technology.collapse.show
        ul
          li
            a(href="#")
              | Gadgets reviews
              span &nbsp;(22)
          li
            a(href="#")
              | Robotics & AI
              span &nbsp;(10)
          li
            a(href="#")
              | Technological trends
              span &nbsp;(13)
    li
      a(href="#")
        | Marketing & Management
        span &nbsp;(24)
    li
      a(href="#")
        | Hobby & Lifestyle
        span &nbsp;(18)

//- Archives Widget
.widget.widget-categories
  h4.widget-title Archives
  ul
    li
      a(href="#")
        i.fe-icon-book.text-muted
        | August 2018
        span &nbsp;(34)
    li
      a(href="#")
        i.fe-icon-book.text-muted
        | July 2018
        span &nbsp;(28)
    li
      a(href="#")
        i.fe-icon-book.text-muted
        | June 2018
        span &nbsp;(47)

//- Recent Posts. List Widget
.widget.widget-featured-posts
  h4.widget-title Recent posts. List
  a(href="#").featured-post
    .featured-post-thumb
      +image("path-to-image", "Post Thumbnail")
    .featured-post-info
      .featured-post-meta
        span.text-primary.opacity-70
          i.fe-icon-clock
          | 22/04/2018
        span.ml-3
          i.fe-icon-message-square
          | 21
      .featured-post-title Getting to another level of design and functionality.
  a(href="#").featured-post ...
  a(href="#").featured-post ...

//- Recent Posts. Carousel Widget
.widget.widget-featured-posts-carousel
  h4.widget-title Recent posts. Carousel
  .owl-carousel(data-owl-carousel='{ "nav": false, "dots": true, "margin": 10, "loop": true }')
    a(href="#").featured-post
      .featured-post-thumb
        +image("path-to-image", "Post Thumbnail")
      .featured-post-info
        .featured-post-meta
          span.text-primary.opacity-70
            i.fe-icon-clock
            | 22/04/2018
          span.ml-3
            i.fe-icon-message-square
            | 21
        .featured-post-title Getting to another level of design and functionality.
    a(href="#").featured-post ...
    a(href="#").featured-post ...

//- Recent Comments Widget
.widget.widget-recent-comments
  h4.widget-title Recent comments
  a(href="#").recent-comment
    span.recent-comment-meta Jane Portman on
    .recent-comment-title The App of The Future
  a(href="#").recent-comment
    span.recent-comment-meta William Smith on
    .recent-comment-title Cherry 5 WordPress Framework
  a(href="#").recent-comment
    span.recent-comment-meta Emma Johnson on
    .recent-comment-title Another Level of Design

//- Tag Cloud Widget
.widget
  h4.widget-title Tag cloud
  a(href="#").tag-link Technology
  a(href="#").tag-link Software
  a(href="#").tag-link Croudfunding
  a(href="#").tag-link Social
  a(href="#").tag-link.active Freelance

HTML
Pug

<!-- Range Slider Widget -->
<div class="widget">
  <h4 class="widget-title">Range slider</h4>
  <form class="range-slider" method="post" 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 class="btn btn-primary btn-xs" type="submit">Filter</button>
      </div>
      <div class="column">
        <div class="ui-range-values">
          <div class="ui-range-label">Price:</div>
          <div class="ui-range-value-min">$<span></span>
            <input type="hidden">
          </div>&nbsp;&ndash;&nbsp;
          <div class="ui-range-value-max">$<span></span>
            <input type="hidden">
          </div>
        </div>
      </div>
    </footer>
  </form>
</div>

<!-- Shop Categories Widget -->
<div class="widget widget-categories">
  <h4 class="widget-title">Shop categories</h4>
  <ul>
    <li>
      <a href="#tv" data-toggle="collapse">TV, Video &amp; Audio<span>&nbsp;(420)</span>
      </a>
      <div class="collapse show" id="tv">
        <ul>
          <li><a href="#">Smart TV Sets<span>&nbsp;(180)</span></a></li>
          <li><a href="#">Blue-Ray Players<span>&nbsp;(132)</span></a></li>
          <li><a href="#">Sound Systems<span>&nbsp;(47)</span></a></li>
          <li><a href="#">Home Theaters<span>&nbsp;(61)</span></a></li>
        </ul>
      </div>
    </li>
    <li>
      <a class="collapsed" href="#headphones" data-toggle="collapse">Headphones<span>&nbsp;(1239)</span></a>
      <div class="collapse" id="headphones">
        <ul>
          <li><a href="#">Earbuds Headphones<span>&nbsp;(752)</span></a></li>
          <li><a href="#">Over-Ear Headphones<span>&nbsp;(487)</span></a></li>
          <li><a href="#">Bluetooth Headphones<span>&nbsp;(205)</span></a></li>
          <li><a href="#">Sport &amp; Fitness<span>&nbsp;(96)</span></a></li>
          <li><a href="#">Noise-Cancelling<span>&nbsp;(113)</span></a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>

<!-- Featured Products. List Widget -->
<div class="widget widget-featured-products">
  <h4 class="widget-title">Featured products. List</h4>
  <a class="featured-product" href="#">
    <div class="featured-product-thumb">
      <img src="path-to-image" alt="Product Image"/>
    </div>
    <div class="featured-product-info">
      <h5 class="featured-product-title">Amazon Echo Dot 2</h5>
      <div class="rating-stars">
      <i class="fe-icon-star active"></i>
      <i class="fe-icon-star active"></i>
      <i class="fe-icon-star active"></i>
      <i class="fe-icon-star active"></i>
      <i class="fe-icon-star"></i>
      </div>
      <span class="featured-product-price">
        <del>$62.00</del>&nbsp;$49.99
      </span>
    </div>
  </a>
  <a class="featured-product" href="#">...</a>
  <a class="featured-product" href="#">...</a>
</div>

<!-- Featured Products. Carousel Widget -->
<div class="widget widget-featured-products-carousel">
  <h4 class="widget-title">Featured products. Carousel</h4>
  <div class="owl-carousel" data-owl-carousel="{ &quot;nav&quot;: false, &quot;dots&quot;: true, &quot;margin&quot;: 10, &quot;loop&quot;: true }">
    <a class="featured-product" href="#">
      <div class="featured-product-thumb">
        <img src="path-to-image" alt="Product Image"/>
      </div>
      <div class="featured-product-info">
        <h5 class="featured-product-title">Amazon Echo Dot 2</h5>
        <div class="rating-stars">
          <i class="fe-icon-star active"></i>
          <i class="fe-icon-star active"></i>
          <i class="fe-icon-star active"></i>
          <i class="fe-icon-star active"></i>
          <i class="fe-icon-star"></i>
        </div>
        <span class="featured-product-price">
          <del>$62.00</del>&nbsp;$49.99
        </span>
      </div>
    </a>
    <a class="featured-product" href="#">...</a>
    <a class="featured-product" href="#">...</a>
  </div>
</div>

<!-- Shopping Cart Widget -->
<div class="widget widget-cart">
  <h4 class="widget-title">Shopping cart</h4>
  <a class="featured-product" href="#">
    <div class="featured-product-thumb">
      <img src="path-to-image" alt="Product Image"/>
    </div>
    <div class="featured-product-info">
      <h5 class="featured-product-title">Samsung Galaxy S9 Plus</h5>
      <span class="featured-product-price">1x $839.99</span>
    </div>
    <span class="remove-product"><i class="fe-icon-x"></i></span>
  </a>
  <a class="featured-product" href="#">
    <div class="featured-product-thumb">
      <img src="path-to-image" alt="Product Image"/>
    </div>
    <div class="featured-product-info">
      <h5 class="featured-product-title">Samsung Gear 360 Camera</h5>
      <span class="featured-product-price">1 x $68.00</span>
    </div>
    <span class="remove-product"><i class="fe-icon-x"></i></span>
  </a>
  <hr class="mt-3 mb-3">
  <span class="text-sm text-muted">Subtotal:&nbsp;</span>
  <strong>$907.99</strong>
  <div class="d-flex justify-content-between pt-3">
    <a class="btn btn-primary btn-block btn-sm mr-2" href="#">View Cart</a>
    <a class="btn btn-accent btn-block btn-sm mr-2" href="#">Checkout</a>
  </div>
</div>

<!-- Filter. Checkboxes Widget -->
<div class="widget">
  <h4 class="widget-title">Filter. Checkboxes</h4>
  <div class="custom-control custom-checkbox">
    <input class="custom-control-input" type="checkbox" id="apple" checked>
    <label class="custom-control-label" for="apple">Apple&nbsp;<span class="text-muted">(254)</span></label>
  </div>
  <div class="custom-control custom-checkbox">
    <input class="custom-control-input" type="checkbox" id="bosh">
    <label class="custom-control-label" for="bosh">Bosh&nbsp;<span class="text-muted">(39)</span></label>
  </div>
  <div class="custom-control custom-checkbox">
    <input class="custom-control-input" type="checkbox" id="canon">
    <label class="custom-control-label" for="canon">Canon Inc.&nbsp;<span class="text-muted">(128)</span></label>
  </div>
</div>

<!-- Filter. Radio Buttons Widget -->
<div class="widget">
  <h4 class="widget-title">Filter. Radio buttons</h4>
  <div class="custom-control custom-radio">
    <input class="custom-control-input" type="radio" id="p100" name="price" checked>
    <label class="custom-control-label" for="p100">$0 - $100&nbsp;<span class="text-muted">(254)</span></label>
  </div>
  <div class="custom-control custom-radio">
    <input class="custom-control-input" type="radio" id="p300" name="price">
    <label class="custom-control-label" for="p300">$101 - $300&nbsp;<span class="text-muted">(39)</span></label>
  </div>
  <div class="custom-control custom-radio">
    <input class="custom-control-input" type="radio" id="p500" name="price">
    <label class="custom-control-label" for="p500">$301 - $500&nbsp;<span class="text-muted">(128)</span></label>
  </div>
</div>

//- Range Slider Widget
.widget
  h4.widget-title Range slider
  form(method="post" 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(type="submit").btn.btn-primary.btn-xs Filter
      .column
        .ui-range-values
          .ui-range-label Price:
          .ui-range-value-min
            | $
            input(type="hidden")
          | &nbsp;–&nbsp;
          .ui-range-value-max
            | $
            input(type="hidden")

//- Shop Categories Widget
.widget.widget-categories
  h4.widget-title Shop categories
  ul
    li
      a(href="#tv" data-toggle="collapse")
        | TV, Video & Audio
        span &nbsp;(420)
      #tv.collapse.show
        ul
          li
            a(href="#")
              | Smart TV Sets
              span &nbsp;(180)
          li
            a(href="#")
              | Blue-Ray Players
              span &nbsp;(132)
          li
            a(href="#")
              | Sound Systems
              span &nbsp;(47)
          li
            a(href="#")
              | Home Theaters
              span &nbsp;(61)
    li
      a(href="#headphones" data-toggle="collapse").collapsed
        | Headphones
        span &nbsp;(1239)
      #headphones.collapse
        ul
          li
            a(href="#")
              | Earbuds Headphones
              span &nbsp;(752)
          li
            a(href="#")
              | Over-Ear Headphones
              span &nbsp;(487)
          li
            a(href="#")
              | Bluetooth Headphones
              span &nbsp;(205)
          li
            a(href="#")
              | Sport & Fitness
              span &nbsp;(96)
          li
            a(href="#")
              | Noise-Cancelling
              span &nbsp;(113)

//- Featured Products. List Widget
.widget.widget-featured-products
  h4.widget-title Featured products. List
  a(href="#").featured-product
    .featured-product-thumb
      +image("path-to-image", "Product Image")
    .featured-product-info
      h5.featured-product-title Amazon Echo Dot 2
      +rating-stars(4)
      span.featured-product-price
        del $62.00
        | &nbsp;$49.99
  a(href="#").featured-product ...
  a(href="#").featured-product ...

//- Featured Products. Carousel Widget
.widget.widget-featured-products-carousel
  h4.widget-title Featured products. Carousel
  .owl-carousel(data-owl-carousel='{ "nav": false, "dots": true, "margin": 10, "loop": true }')
    a(href="#").featured-product
      .featured-product-thumb
        +image("path-to-image", "Product Image")
      .featured-product-info
        h5.featured-product-title Amazon Echo Dot 2
        +rating-stars(4)
        span.featured-product-price
          del $62.00
          |  $49.99
    a(href="#").featured-product ...
    a(href="#").featured-product ...

//- Shopping Cart Widget
.widget.widget-cart
  h4.widget-title Shopping cart
  a(href="#").featured-product
    .featured-product-thumb
      +image("path-to-image", "Product Image")
    .featured-product-info
      h5.featured-product-title Samsung Galaxy S9 Plus
      span.featured-product-price 1x $839.99
    span.remove-product: i.fe-icon-x
  a(href="#").featured-product
    .featured-product-thumb
      +image("path-to-image", "Product Image")
    .featured-product-info
      h5.featured-product-title Samsung Gear 360 Camera
      span.featured-product-price 1 x $68.00
    span.remove-product: i.fe-icon-x
  hr.mt-3.mb-3
  span.text-sm.text-muted Subtotal:&nbsp;
  strong $907.99
  .d-flex.justify-content-between.pt-3
    a(href="#").btn.btn-primary.btn-block.btn-sm.mr-2 View Cart
    a(href="#").btn.btn-accent.btn-block.btn-sm.mr-2 Checkout

//- Filter. Checkboxes Widget
.widget
  h4.widget-title Filter. Checkboxes
  .custom-control.custom-checkbox
    input(type="checkbox" id="apple" checked).custom-control-input
    label(for="apple").custom-control-label
      | Apple&nbsp;
      span.text-muted (254)
  .custom-control.custom-checkbox
    input(type="checkbox" id="bosh").custom-control-input
    label(for="bosh").custom-control-label
      | Bosh&nbsp;
      span.text-muted (39)
  .custom-control.custom-checkbox
    input(type="checkbox" id="canon").custom-control-input
    label(for="canon").custom-control-label
      | Canon Inc.&nbsp;
      span.text-muted (128)

//- Filter. Radio Buttons Widget
.widget
  h4.widget-title Filter. Radio buttons
  .custom-control.custom-radio
    input(type="radio" id="p100" name="price" checked).custom-control-input
    label(for="p100").custom-control-label
      | $0 - $100&nbsp;
      span.text-muted (254)
  .custom-control.custom-radio
    input(type="radio" id="p300" name="price").custom-control-input
    label(for="p300").custom-control-label
      | $101 - $300&nbsp;
      span.text-muted (39)
  .custom-control.custom-radio
    input(type="radio" id="p500" name="price").custom-control-input
    label(for="p500").custom-control-label
      | $301 - $500&nbsp;
      span.text-muted (128)

You can apply light skin to any above widget (General, Blog, Shop) by adding widget-light-skin class to widget.
See Contacts widget example below:

HTML
Pug

<!-- Contacts Widget Light Skin -->
<div class="widget widget-contacts widget-light-skin">
  <h4 class="widget-title">Contacts</h4>
  <ul>
    <li>
      <i class="fe-icon-map-pin"></i>
      <span>Find us</span>
      <a href="https://www.google.com/maps/place/1260+Broadway,+New+York,+NY+10001,+USA/@40.7483811,-73.9898009,17z/data=!3m1!4b1!4m5!3m4!1s0x89c259a920a0a5fb:0xa4329a8e21872659!8m2!3d40.7483811!4d-73.9876122" target="_blank">1260 Broadway, New York</a>
    </li>
    <li>
      <i class="fe-icon-phone"></i>
      <span>Call us</span>
      <a href="tel:00180039025">001 800 390 25</a>
    </li>
    <li>
      <i class="fe-icon-mail"></i>
      <span>Write us</span>
      <a href="mailto:info@example.com">info@example.com</a>
    </li>
  </ul>
</div>

//- Contacts Widget Light Skin
.widget.widget-contacts.widget-light-skin
  h4.widget-title Contacts
  ul
    li
      i.fe-icon-map-pin
      span Find us
      a(href="https://www.google.com/maps/place/1260+Broadway,+New+York,+NY+10001,+USA/@40.7483811,-73.9898009,17z/data=!3m1!4b1!4m5!3m4!1s0x89c259a920a0a5fb:0xa4329a8e21872659!8m2!3d40.7483811!4d-73.9876122" target="_blank") 1260 Broadway, New York
    li
      i.fe-icon-phone
      span Call us
      a(href="tel:00180039025") 001 800 390 25
    li
      i.fe-icon-mail
      span Write us
      a(href="mailto:info@example.com") info@example.com