Sidebar examples

Component #1

Below is a static sidebar example without hs-sticky-block.js plugin. But the plugin's code included in the code snippets.

Image Description
Industry
E-commerce
Location
Seattle, Washington, U.S.
Goals
Build campaigns that bring in quality leads who convert from free to paid.
Type
B2C

Products used

SVG

Amazon wallet

Send targeted currencies to the right people at the right time.

SVG

Amazon Fire TV

Amazon Fire TV is a digital media player and its microconsole remote.

<!-- Content Section -->
<div class="container space-2 space-lg-0">
  <div class="row">
    <div id="stickyBlockStartPoint" class="col-lg-4 mt-lg-n11 mb-7 mb-lg-0">
      <!-- Sidebar Content -->
      <div class="js-sticky-block card bg-white"
           data-hs-sticky-block-options='{
             "parentSelector": "#stickyBlockStartPoint",
             "startPoint": "#stickyBlockStartPoint",
             "endPoint": "#stickyBlockEndPoint",
             "stickyOffsetTop": 24,
             "stickyOffsetBottom": 24
           }'>
        <div class="card-header text-center py-5">
          <div class="max-w-27rem mx-auto">
            <img class="img-fluid" src="../../assets/svg/clients-logo/amazon-original.svg" alt="Image Description">
          </div>
        </div>

        <div class="card-body">
          <div class="border-bottom pb-2 mb-4">
            <dl class="row font-size-1">
              <dt class="col-sm-4 text-dark">Industry</dt>
              <dd class="col-sm-8 text-body">E-commerce</dd>
            </dl>
            <dl class="row font-size-1">
              <dt class="col-sm-4 text-dark">Location</dt>
              <dd class="col-sm-8 text-body">Seattle, Washington, U.S.</dd>
            </dl>
            <dl class="row font-size-1">
              <dt class="col-sm-4 text-dark">Goals</dt>
              <dd class="col-sm-8 text-body">Build campaigns that bring in quality leads who convert from free to paid.</dd>
            </dl>
            <dl class="row font-size-1">
              <dt class="col-sm-4 text-dark">Type</dt>
              <dd class="col-sm-8 text-body">B2C</dd>
            </dl>
          </div>

          <div class="mb-3">
            <h4>Products used</h4>
          </div>

          <dl class="row font-size-1">
            <dt class="col-sm-4 mb-2 mb-sm-0">
              <figure class="max-w-8rem w-100">
                <img class="img-fluid" src="../../assets/svg/icons/icon-34.svg" alt="SVG">
              </figure>
            </dt>
            <dd class="col-sm-8 text-body">
              <h4 class="font-size-1 mb-0">Amazon wallet</h4>
              <p class="font-size-1 mb-0">Send targeted currencies to the right people at the right time.</p>
            </dd>
          </dl>
          <dl class="row font-size-1 mb-0">
            <dt class="col-sm-4 mb-2 mb-sm-0">
              <figure class="max-w-8rem w-100">
                <img class="img-fluid" src="../../assets/svg/icons/icon-41.svg" alt="SVG">
              </figure>
            </dt>
            <dd class="col-sm-8 text-body">
              <h4 class="font-size-1 mb-0">Amazon Fire TV</h4>
              <p class="font-size-1 mb-0">Amazon Fire TV is a digital media player and its microconsole remote.</p>
            </dd>
          </dl>
        </div>
      </div>
      <!-- End Sidebar Content -->
    </div>
  </div>
</div>
<!-- End Content Section -->

<!-- Sticky Block End Point -->
<div id="stickyBlockEndPoint"></div>
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of sticky blocks
    $('.js-sticky-block').each(function () {
      var stickyBlock = new HSStickyBlock($(this)).init();
    });
  });
</script>
Copy

Component #2

Below is a static sidebar example without hs-sticky-block.js plugin. But the plugin's code included in the code snippets.

<!-- Blogs Section -->
<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <div class="mb-7">
        <div class="mb-3">
          <h3>Newsletter</h3>
        </div>

        <!-- Form -->
        <form class="js-validate mb-2">
          <label class="sr-only" for="subscribeSr">Subscribe</label>
          <div class="input-group input-group-flush mb-3">
            <input type="email" class="form-control form-control-sm" name="email" id="subscribeSr" placeholder="Your email" aria-label="Your email" required
                  data-msg="Please enter a valid email address.">
          </div>
          <button type="submit" class="btn btn-sm btn-primary btn-block">Subscribe</button>
        </form>
        <!-- End Form -->

        <p class="small">Get special offers on the latest developments from Front.</p>
      </div>

      <div class="mb-7">
        <div class="mb-3">
          <h3>Productivity</h3>
        </div>

        <!-- Blog -->
        <article class="mb-3">
          <a class="card card-frame p-3" href="#">
            <div class="media align-items-center">
              <div class="media-body mr-2">
                <h4 class="h6 mb-0">Here's how to dodge distractions</h4>
                <span class="d-block font-size-1 text-body">Feb 08, 2020</span>
              </div>
              <i class="fas fa-angle-right"></i>
            </div>
          </a>
        </article>
        <!-- End Blog -->

        <!-- Blog -->
        <article class="mb-3">
          <a class="card card-frame p-3" href="#">
            <div class="media align-items-center">
              <div class="media-body mr-2">
                <h4 class="h6 mb-0">Ideas to stay productive</h4>
                <span class="d-block font-size-1 text-body">Feb 09, 2020</span>
              </div>
              <i class="fas fa-angle-right"></i>
            </div>
          </a>
        </article>
        <!-- End Blog -->

        <!-- Blog -->
        <article class="mb-3">
          <a class="card card-frame p-3" href="#">
            <div class="media align-items-center">
              <div class="media-body mr-2">
                <h4 class="h6 mb-0">Classic design principles</h4>
                <span class="d-block font-size-1 text-body">Feb 10, 2020</span>
              </div>
              <i class="fas fa-angle-right"></i>
            </div>
          </a>
        </article>
        <!-- End Blog -->
      </div>

      <!-- Sticky Block Start Point -->
      <div id="stickyBlockStartPoint"></div>

      <div class="js-sticky-block"
           data-hs-sticky-block-options='{
             "parentSelector": "#stickyBlockStartPoint",
             "breakpoint": "lg",
             "startPoint": "#stickyBlockStartPoint",
             "endPoint": "#stickyBlockEndPoint",
             "stickyOffsetTop": 24,
             "stickyOffsetBottom": 24
           }'>
        <div class="mb-7">
          <div class="mb-3">
            <h3>Front culture</h3>
          </div>

          <!-- Blog -->
          <article class="mb-5">
            <div class="media align-items-center text-inherit">
              <div class="avatar avatar-lg mr-3">
                <img class="avatar-img" src="../../assets/img/320x320/img1.jpg" alt="Image Description">
              </div>
              <div class="media-body">
                <h4 class="h6 mb-0"><a class="text-inherit" href="#">Announcing a free plan for small teams</a></h4>
              </div>
            </div>
          </article>
          <!-- End Blog -->

          <!-- Blog -->
          <article class="mb-5">
            <div class="media align-items-center text-inherit">
              <div class="avatar avatar-lg mr-3">
                <img class="avatar-img" src="../../assets/img/320x320/img10.jpg" alt="Image Description">
              </div>
              <div class="media-body">
                <h4 class="h6 mb-0"><a class="text-inherit" href="#">Mapping the first family tree for Front office</a></h4>
              </div>
            </div>
          </article>
          <!-- End Blog -->

          <!-- Blog -->
          <article class="mb-5">
            <div class="media align-items-center text-inherit">
              <div class="avatar avatar-lg mr-3">
                <img class="avatar-img" src="../../assets/img/320x320/img9.jpg" alt="Image Description">
              </div>
              <div class="media-body">
                <h4 class="h6 mb-0"><a class="text-inherit" href="#">Felline eyeing first major Classic win in 2018</a></h4>
              </div>
            </div>
          </article>
          <!-- End Blog -->
        </div>

        <div class="mb-7">
          <div class="mb-3">
            <h3>Tags</h3>
          </div>

          <a class="btn btn-xs btn-soft-secondary mb-1" href="#">Business</a>
          <a class="btn btn-xs btn-soft-secondary mb-1" href="#">Adventure</a>
          <a class="btn btn-xs btn-soft-secondary mb-1" href="#">Community</a>
          <a class="btn btn-xs btn-soft-secondary mb-1" href="#">Announcements</a>
          <a class="btn btn-xs btn-soft-secondary mb-1" href="#">Tutorials</a>
          <a class="btn btn-xs btn-soft-secondary mb-1" href="#">Resources</a>
          <a class="btn btn-xs btn-soft-secondary mb-1" href="#">Classic</a>
          <a class="btn btn-xs btn-soft-secondary mb-1" href="#">Photography</a>
          <a class="btn btn-xs btn-soft-secondary mb-1" href="#">Interview</a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Blogs Section -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.validation.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of sticky blocks
    $('.js-sticky-block').each(function () {
      var stickyBlock = new HSStickyBlock($(this)).init();
    });

    // initialization of form validation
    $('.js-validate').each(function () {
      var validation = $.HSCore.components.HSValidation.init($(this));
    });
  });
</script>
Copy

Component #3 

<!-- App Description Section -->
<div class="container">
  <!-- Content -->
  <div class="row">
    <div class="col-md-4 col-lg-3 mb-9 mb-md-0">
      <!-- App Info -->
      <div class="mr-lg-2">
        <div class="mb-7">
          <div class="text-center mx-auto mb-3">
            <img class="img-fluid" src="../../assets/img/160x160/img23.png" alt="Image Description" width="130">
          </div>

          <a class="btn btn-sm btn-block btn-primary transition-3d-hover" href="#">Install Now</a>
        </div>

        <div class="mb-md-7">
          <h1 class="h4">Categories</h1>

          <span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Featured</a></span>
          <span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">File management</a></span>
          <span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Productivity</a></span>
          <span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Essential apps</a></span>
          <span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Free</a></span>
          <span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Paid</a></span>
          <span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Google</a></span>
        </div>

        <div class="d-none d-md-block mb-7">
          <h2 class="h4">Developer</h2>

          <a class="d-inline-block text-body" href="#">
            <div class="media align-items-center">
              <div class="avatar avatar-xs mr-3">
                <img class="avatar-img" src="../../assets/img/160x160/img23.png" alt="Image Description">
              </div>
              <div class="media-body">
                Google Drive
              </div>
            </div>
          </a>
        </div>

        <div class="d-none d-md-block mb-7">
          <h3 class="h4">Developer links</h3>

          <ul class="list-unstyled font-size-1">
            <li><a class="text-body" href="#"><i class="fas fa-angle-right mr-1"></i> Support</a></li>
            <li><a class="text-body" href="#"><i class="fas fa-angle-right mr-1"></i> Documentation</a></li>
            <li><a class="text-body" href="#"><i class="fas fa-angle-right mr-1"></i> Privacy Policy</a></li>
          </ul>
        </div>

        <div class="d-none d-md-block">
          <a class="small text-body" href="#"><i class="far fa-flag mr-1"></i> Report abuse</a>
        </div>
      </div>
      <!-- End App Info -->
    </div>
  </div>
  <!-- End Content -->
</div>
<!-- End App Description Section -->
Copy

Component #4

Below is a static sidebar example without hs-sticky-block.js plugin. But the plugin's code included in the code snippets.

Image Description Preview this course
$59.00 $114.99
Buy Now

30-day money-back guarantee

This course includes

46.5 hours on-demand video
77 articles
85 downloadable resources
Full time access
Access on mobile and Tablet
Certificate of Completion
Share 
<!-- Sidebar Content Section -->
<div class="container position-md-absolute top-0 right-0 left-0">
  <div class="row">
    <div id="stickyBlockStartPoint" class="col-md-5 col-lg-4 position-relative z-index-2">
      <div class="js-sticky-block card border"
           data-hs-sticky-block-options='{
             "parentSelector": "#stickyBlockStartPoint",
             "breakpoint": "md",
             "startPoint": "#stickyBlockStartPoint",
             "endPoint": "#stickyBlockEndPoint",
             "stickyOffsetTop": 12,
             "stickyOffsetBottom": 12
           }'>
        <div class="position-relative p-1">
          <!-- Video Popup -->
          <a class="js-fancybox video-player" href="javascript:;"
             data-hs-fancybox-options='{
               "src": "//youtube.com/0qisGSwZym4",
               "caption": "Front - Responsive Website Template",
               "speed": 700,
               "buttons": ["fullScreen", "close"],
               "youtube": {
                 "autoplay": 1
               }
             }'>
            <img class="card-img-top" src="../../assets/svg/components/graphics-1.svg" alt="Image Description">

            <span class="video-player-btn video-player-centered text-center">
              <span class="video-player-icon mb-2">
                <i class="fa fa-play"></i>
              </span>
              <span class="d-block text-center text-white">
                Preview this course
              </span>
            </span>
          </a>
          <!-- End Video Popup -->
        </div>

        <div class="card-body">
          <div class="mb-3">
            <span class="h2 text-lh-sm mr-1 mb-0">$59.00</span>
            <span class="lead text-muted text-lh-sm"><del>$114.99</del></span>
          </div>

          <div class="mb-2">
            <a class="btn btn-block btn-primary transition-3d-hover" href="#">Buy Now</a>
          </div>

          <div class="text-center mb-4">
            <p class="small">30-day money-back guarantee</p>
          </div>

          <h2 class="h4">This course includes</h2>

          <!-- Icon Block -->
          <div class="media text-body font-size-1 mb-2">
            <div class="min-w-3rem text-center mr-3">
              <i class="fa fa-video"></i>
            </div>
            <div class="media-body">
              46.5 hours on-demand video
            </div>
          </div>
          <!-- End Icon Block -->

          <!-- Icon Block -->
          <div class="media text-body font-size-1 mb-2">
            <div class="min-w-3rem text-center mr-3">
              <i class="fa fa-file"></i>
            </div>
            <div class="media-body">
              77 articles
            </div>
          </div>
          <!-- End Icon Block -->

          <!-- Icon Block -->
          <div class="media text-body font-size-1 mb-2">
            <div class="min-w-3rem text-center mr-3">
              <i class="fa fa-file-download"></i>
            </div>
            <div class="media-body">
              85 downloadable resources
            </div>
          </div>
          <!-- End Icon Block -->

          <!-- Icon Block -->
          <div class="media text-body font-size-1 mb-2">
            <div class="min-w-3rem text-center mr-3">
              <i class="fa fa-infinity"></i>
            </div>
            <div class="media-body">
              Full time access
            </div>
          </div>
          <!-- End Icon Block -->

          <!-- Icon Block -->
          <div class="media text-body font-size-1 mb-2">
            <div class="min-w-3rem text-center mr-3">
              <i class="fa fa-mobile"></i>
            </div>
            <div class="media-body">
              Access on mobile and Tablet
            </div>
          </div>
          <!-- End Icon Block -->

          <!-- Icon Block -->
          <div class="media text-body font-size-1 mb-2">
            <div class="min-w-3rem text-center mr-3">
              <i class="fa fa-certificate"></i>
            </div>
            <div class="media-body">
              Certificate of Completion
            </div>
          </div>
          <!-- End Icon Block -->
        </div>

        <!-- Button trigger modal -->
        <a class="card-footer text-center font-weight-bold py-3" data-toggle="modal" data-target="#copyToClipboardModal" href="javascript:;">
          <i class="fa fa-share mr-1"></i>
          Share
        </a>
        <!-- End Button trigger modal -->
      </div>
    </div>
  </div>
</div>
<!-- End Sidebar Content Section -->

<!-- Sticky Block End Point -->
<div id="stickyBlockEndPoint"></div>

<!-- Copy to Clipboard Modal -->
<div class="modal fade" id="copyToClipboardModal" tabindex="-1" role="dialog" aria-labelledby="copyToClipboardModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <!-- Header -->
      <div class="modal-header">
        <h4 id="copyToClipboardModalTitle" class="mb-0">Share this course</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <svg aria-hidden="true" class="mb-0" width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
            <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
          </svg>
        </button>
      </div>
      <!-- End Header -->

      <!-- Body -->
      <div class="modal-body">
        <form>
          <!-- Clipboard -->
          <div class="input-group mb-4">
            <input id="copyToClipboard" type="text" class="form-control" value="http://www.front-course.com/share/3874/">
            <div class="input-group-append">
              <a class="js-clipboard input-group-text" href="javascript:;"
                 data-hs-clipboard-options='{
                   "contentTarget": "#copyToClipboard",
                   "successText": "Copied!",
                   "container": "#copyToClipboardModal"
                 }'>Copy</a>
            </div>
          </div>
          <!-- End Clipboard -->
        </form>

        <!-- Social Networks -->
        <ul class="list-inline mb-0">
          <li class="list-inline-item">
            <a class="btn btn-xs btn-icon btn-outline-secondary" href="#">
              <i class="fab fa-facebook-f"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="btn btn-xs btn-icon btn-outline-secondary" href="#">
              <i class="fab fa-twitter"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="btn btn-xs btn-icon btn-outline-secondary" href="#">
              <i class="fab fa-medium-m"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="btn btn-xs btn-icon btn-outline-secondary" href="#">
              <i class="fa fa-envelope"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="btn btn-xs btn-icon btn-outline-secondary" href="#">
              <i class="fab fa-slack"></i>
            </a>
          </li>
        </ul>
        <!-- End Social Networks -->
      </div>
      <!-- End Body -->
    </div>
  </div>
</div>
<!-- End Copy to Clipboard Modal -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>
<script src="../../assets/vendor/fancybox/dist/jquery.fancybox.min.js"></script>
<script src="../../assets/vendor/clipboard/dist/clipboard.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.fancybox.js"></script>
<script src="../../assets/js/hs.clipboard.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of fancybox
    $('.js-fancybox').each(function () {
      var fancybox = $.HSCore.components.HSFancyBox.init($(this));
    });

    // initialization of sticky blocks
    $('.js-sticky-block').each(function () {
      var stickyBlock = new HSStickyBlock($(this)).init();
    });

    // initialization of clipboard
    $('.js-clipboard').each(function() {
      var clipboard = $.HSCore.components.HSClipboard.init(this);
    });
  });
</script>
Copy

Component #5

Below is a static sidebar example without hs-sticky-block.js plugin. But the plugin's code included in the code snippets.

<!-- Profile Section -->
<div class="container">
  <div class="row">
    <div id="stickyBlockStartPoint" class="col-md-5 col-lg-4 mb-7 mb-md-0">
      <div class="js-sticky-block card border p-4"
           data-hs-sticky-block-options='{
             "parentSelector": "#stickyBlockStartPoint",
             "breakpoint": "md",
             "startPoint": "#stickyBlockStartPoint",
             "endPoint": "#stickyBlockEndPoint",
             "stickyOffsetTop": 12,
             "stickyOffsetBottom": 12
           }'>
        <div class="text-center">
          <!-- User Content -->
          <img class="img-fluid rounded-circle mx-auto" src="../../assets/img/160x160/img2.jpg" alt="Image Description" width="120" height="120">

          <span class="d-block text-body font-size-1 mt-3">Joined in 2017</span>

          <div class="mt-3">
            <a class="btn btn-sm btn-outline-primary transition-3d-hover" href="#">
              <i class="far fa-envelope mr-2"></i>
              Send Message
            </a>
          </div>
          <!-- End User Content -->
        </div>

        <div class="border-top pt-4 mt-4">
          <div class="row">
            <div class="col-6 col-md-12 col-lg-6 mb-4">
              <!-- Icon Block -->
              <div class="media">
                <div class="d-flex">
                  <span class="avatar avatar-xs mr-3">
                    <img class="avatar-img" src="../../assets/svg/illustrations/review-rating-shield.svg" alt="Image Description">
                  </span>
                  <span class="text-body font-size-1 mt-1">533 Reviews</span>
                </div>
              </div>
              <!-- End Icon Block -->
            </div>

            <div class="col-6 col-md-12 col-lg-6 mb-4">
              <!-- Icon Block -->
              <div class="d-flex">
                <span class="avatar avatar-xs mr-3">
                  <img class="avatar-img" src="../../assets/svg/illustrations/star.svg" alt="Image Description">
                </span>
                <span class="text-body font-size-1 mt-1">4.87 rating</span>
              </div>
              <!-- End Icon Block -->
            </div>

            <div class="col-6 col-md-12 col-lg-6 mb-4 col-6 col-md-12 mb-lg-0">
              <!-- Icon Block -->
              <div class="d-flex">
                <span class="avatar avatar-xs mr-3">
                  <img class="avatar-img" src="../../assets/svg/illustrations/medal.svg" alt="Image Description">
                </span>
                <span class="text-body font-size-1 mt-1">Top teacher</span>
              </div>
              <!-- End Icon Block -->
            </div>

            <div class="col-6 col-md-12 col-lg-6">
              <!-- Icon Block -->
              <div class="d-flex">
                <span class="avatar avatar-xs mr-3">
                  <img class="avatar-img" src="../../assets/svg/illustrations/add-file.svg" alt="Image Description">
                </span>
                <span class="text-body font-size-1 mt-1">29 courses</span>
              </div>
              <!-- End Icon Block -->
            </div>
          </div>
        </div>

        <div class="border-top pt-4 mt-4">
          <h1 class="h4 mb-4">Connected accounts</h1>

          <div class="row">
            <div class="col-6 col-md-12 col-lg-6 mb-4">
              <!-- Social Profiles -->
              <a class="media" href="#">
                <div class="icon icon-xs icon-soft-secondary mr-3">
                  <i class="fab fa-github"></i>
                </div>
                <div class="media-body">
                  <span class="d-block font-size-1 font-weight-bold">Behance</span>
                  <small class="d-block text-body">1.2k followers</small>
                </div>
              </a>
              <!-- End Social Profiles -->
            </div>

            <div class="col-6 col-md-12 col-lg-6 mb-4">
              <!-- Social Profiles -->
              <a class="media" href="#">
                <div class="icon icon-xs icon-soft-secondary mr-3">
                  <i class="fab fa-slack"></i>
                </div>
                <div class="media-body">
                  <span class="d-block font-size-1 font-weight-bold">Slack</span>
                  <small class="d-block text-body">4.5k followers</small>
                </div>
              </a>
              <!-- End Social Profiles -->
            </div>

            <div class="col-6 col-md-12 col-lg-6 mb-0 mb-md-4 mb-lg-0">
              <!-- Social Profiles -->
              <a class="media" href="#">
                <div class="icon icon-xs icon-soft-secondary mr-3">
                  <i class="fab fa-twitter"></i>
                </div>
                <div class="media-body">
                  <span class="d-block font-size-1 font-weight-bold">Twitter</span>
                  <small class="d-block text-body">2.7k followers</small>
                </div>
              </a>
              <!-- End Social Profiles -->
            </div>

            <div class="col-6 col-md-12 col-lg-6">
              <!-- Social Profiles -->
              <a class="media" href="#">
                <div class="icon icon-xs icon-soft-secondary mr-3">
                  <i class="fab fa-facebook-f"></i>
                </div>
                <div class="media-body">
                  <span class="d-block font-size-1 font-weight-bold">Facebook</span>
                  <small class="d-block text-body">3k followers</small>
                </div>
              </a>
              <!-- End Social Profiles -->
            </div>
          </div>
        </div>

        <div class="border-top text-center pt-4 mt-4">
          <a class="text-body small" href="#">
            <i class="far fa-flag mr-1"></i> Report this author
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Profile Section -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of sticky blocks
    $('.js-sticky-block').each(function () {
      var stickyBlock = new HSStickyBlock($(this)).init();
    });
  });
</script>
Copy

Component #6 

<!-- Apps Section -->
<div class="container">
  <div class="row">
    <div class="col-lg-3 mb-5 mb-lg-0">
      <div class="mr-lg-3">
        <!-- Navbar -->
        <div class="navbar-expand-lg navbar-expand-lg-collapse-block navbar-light">
          <!-- Responsive Toggle Button -->
          <button type="button" class="navbar-toggler btn btn-block border py-3"
                  aria-label="Toggle navigation"
                  aria-expanded="false"
                  aria-controls="sidebarNavExample1"
                  data-toggle="collapse"
                  data-target="#sidebarNavExample1">
            <span class="d-flex justify-content-between align-items-center">
              <span class="h5 mb-0">View all categories</span>
              <span class="navbar-toggler-default">
                <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                  <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
                </svg>
              </span>
              <span class="navbar-toggler-toggled">
                <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                  <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                </svg>
              </span>
            </span>
          </button>
          <!-- End Responsive Toggle Button -->

          <div id="sidebarNavExample1" class="collapse navbar-collapse">
            <div class="p-2 p-lg-0">
              <div class="mt-3 mt-lg-0">
                <h2 class="h4">Explore</h2>

                <!-- Nav Link -->
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  All
                  <span class="badge border badge-pill">30+</span>
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  Top rated
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  Featured
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  Daily tools
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  New
                  <span class="badge border badge-pill">18</span>
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  Channels
                </a>
                <!-- End Nav Link -->
              </div>

              <div class="mt-5">
                <h3 class="h4">Categories</h3>

                <!-- Nav Link -->
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  API management
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  Code quality
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  Code review
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  Integration
                  <span class="badge border badge-pill">4</span>
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  File management
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  Mobile
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  Monitoring
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  Publishing
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  Security
                  <span class="badge border badge-pill">20</span>
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  File management
                  <span class="badge border badge-pill">1</span>
                </a>
                <!-- End Nav Link -->
              </div>

              <div class="mt-5">
                <h3 class="h4">Filters</h3>

                <!-- Nav Link -->
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  Free
                  <span class="badge border badge-pill">9+</span>
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  Free trial
                </a>
                <!-- End Nav Link -->
              </div>

              <div class="mt-5">
                <h3 class="h4">Verification</h3>

                <!-- Nav Link -->
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  Verified
                </a>
                <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                  Unverified
                </a>
                <!-- End Nav Link -->
              </div>
            </div>
          </div>
        </div>
        <!-- End Navbar -->
      </div>
    </div>
  </div>
</div>
<!-- End Apps Section -->
Copy

Component #7 

<!-- Courses Section -->
<div class="container">
  <div class="row">
    <div class="col-lg-3 mb-5 mb-lg-0">
      <div class="navbar-expand-lg navbar-expand-lg-collapse-block">
        <!-- Responsive Toggle Button -->
        <button type="button" class="navbar-toggler btn btn-block border py-3"
                aria-label="Toggle navigation"
                aria-expanded="false"
                aria-controls="sidebarNavExample2"
                data-toggle="collapse"
                data-target="#sidebarNavExample2">
          <span class="d-flex justify-content-between align-items-center">
            <span class="h5 mb-0">View all categories</span>
            <span class="navbar-toggler-default">
              <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
              </svg>
            </span>
            <span class="navbar-toggler-toggled">
              <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
              </svg>
            </span>
          </span>
        </button>
        <!-- End Responsive Toggle Button -->

        <div id="sidebarNavExample2" class="collapse navbar-collapse">
          <div class="mt-5 mt-lg-0">
            <h2 class="h4"><a class="text-inherit" href="#">Artificial Intelligence</a></h2>

            <!-- Nav Link -->
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              AI Product Manager
              <span class="badge bg-soft-secondary badge-pill">30+</span>
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              AI Programming with Python
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Computer Vision
              <span class="badge badge-success badge-pill ml-1">New</span>
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Deep Learning
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Deep Reinforcement Learning
              <span class="badge bg-soft-secondary badge-pill">18</span>
            </a>
            <!-- End Nav Link -->

            <!-- View More - Collapse -->
            <div class="collapse" id="collapseSectionOne">
              <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                Machine Learning
              </a>
              <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                Natural Language Processing
              </a>
            </div>
            <!-- End View More - Collapse -->

            <!-- Link -->
            <a class="link link-collapse small font-size-1 font-weight-bold pt-1" data-toggle="collapse" href="#collapseSectionOne" role="button" aria-expanded="false" aria-controls="collapseSectionOne">
              <span class="link-collapse-default">View more</span>
              <span class="link-collapse-active">View less</span>
              <span class="link-icon ml-1">+</span>
            </a>
            <!-- End Link -->
          </div>

          <div class="mt-5">
            <h3 class="h4"><a class="text-inherit" href="#">Data Science</a></h3>

            <!-- Nav Link -->
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Business Analytics
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Data Analyst
              <span class="badge badge-success badge-pill ml-1">New</span>
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Data Engineer
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Data Scientist
              <span class="badge bg-soft-secondary badge-pill">4</span>
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Data Visualization
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Predictive Analytics for Business
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Programming for Data Science
            </a>
            <!-- End Nav Link -->
          </div>

          <div class="mt-5">
            <h3 class="h4"><a class="text-inherit" href="#">Programming and Development</a></h3>

            <!-- Nav Link -->
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              AI Programming with Python
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Android Basics
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Android Developer
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Blockchain
              <span class="badge bg-soft-secondary badge-pill">4</span>
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              C++
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Front End Web Developer
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Java Developer
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              iOS
              <span class="badge badge-success badge-pill ml-1">New</span>
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Intro to Programming
            </a>
            <!-- End Nav Link -->

            <!-- View More - Collapse -->
            <div class="collapse" id="collapseSectionTwo">
              <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                Java Developer
              </a>
              <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
                React
              </a>
            </div>
            <!-- End View More - Collapse -->

            <!-- Link -->
            <a class="link link-collapse small font-size-1 font-weight-bold pt-1" data-toggle="collapse" href="#collapseSectionTwo" role="button" aria-expanded="false" aria-controls="collapseSectionTwo">
              <span class="link-collapse-default">View more</span>
              <span class="link-collapse-active">View less</span>
              <span class="link-icon ml-1">+</span>
            </a>
            <!-- End Link -->
          </div>

          <div class="mt-5">
            <h3 class="h4"><a class="text-inherit" href="#">Cloud Computing</a></h3>

            <!-- Nav Link -->
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Cloud Developer
              <span class="badge bg-soft-secondary badge-pill">9+</span>
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Cloud Dev Ops Engineer
            </a>
            <!-- End Nav Link -->
          </div>

          <div class="mt-5">
            <h3 class="h4"><a class="text-inherit" href="#">Business</a></h3>

            <!-- Nav Link -->
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Business Analytics
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Digital Marketing
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Marketing Analytics
            </a>
            <!-- End Nav Link -->

            <!-- View More - Collapse -->
            <div class="collapse" id="collapseSectionThree">
              <a class="nav-link" href="#">
                Predictive Analytics for Business
              </a>
            </div>
            <!-- End View More - Collapse -->

            <!-- Link -->
            <a class="link link-collapse small font-size-1 font-weight-bold pt-1" data-toggle="collapse" href="#collapseSectionThree" role="button" aria-expanded="false" aria-controls="collapseSectionThree">
              <span class="link-collapse-default">View more</span>
              <span class="link-collapse-active">View less</span>
              <span class="link-icon ml-1">+</span>
            </a>
            <!-- End Link -->
          </div>

          <div class="mt-5">
            <h3 class="h4"><a class="text-inherit" href="#">Career <span class="badge badge-success badge-pill ml-1">New</span></a></h3>

            <!-- Nav Link -->
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Applying to Jobs
            </a>
            <a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
              Interviewing
            </a>
            <!-- End Nav Link -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Courses Section -->
Copy

Component #8 

<!-- Categories Section -->
<div class="container">
  <div class="row">
    <div class="col-lg-3 mb-5 mb-lg-0">
      <!-- Navbar -->
      <div class="navbar-expand-lg navbar-expand-lg-collapse-block navbar-light">
        <!-- Responsive Toggle Button -->
        <button type="button" class="navbar-toggler btn btn-block border py-3"
                aria-label="Toggle navigation"
                aria-expanded="false"
                aria-controls="sidebarNavExample3"
                data-toggle="collapse"
                data-target="#sidebarNavExample3">
          <span class="d-flex justify-content-between align-items-center">
            <span class="h5 mb-0">View all categories</span>
            <span class="navbar-toggler-default">
              <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
              </svg>
            </span>
            <span class="navbar-toggler-toggled">
              <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
              </svg>
            </span>
          </span>
        </button>
        <!-- End Responsive Toggle Button -->

        <div id="sidebarNavExample3" class="collapse navbar-collapse">
          <!-- Nav Link -->
          <div class="pl-2 pl-lg-0 mt-3 mt-lg-0">
            <div class="position-relative">
              <a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav1Collapse" data-target="#sidebarNav1Collapse">
                Electronic devices
              </a>

              <div id="sidebarNav1Collapse" class="collapse" data-parent="#sidebarNavExample3">
                <div id="sidebarNav1" class="navbar-nav align-items-start flex-column">
                  <div class="position-relative">
                    <a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav1One" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav1One">
                      Electronic accessories
                    </a>
                    <div id="sidebarNav1One" class="navbar-nav flex-column collapse" data-parent="#sidebarNav1">
                      <a class="dropdown-item" href="#">Mobile accessories</a>
                      <a class="dropdown-item" href="#">Portable audio</a>
                      <a class="dropdown-item" href="#">Wearable</a>
                      <a class="dropdown-item" href="#">Console accessories</a>
                      <a class="dropdown-item" href="#">Camera accessories</a>
                      <a class="dropdown-item" href="#">Computer accessories</a>
                      <a class="dropdown-item" href="#">Storage</a>
                      <a class="dropdown-item" href="#">Printers</a>
                      <a class="dropdown-item" href="#">Computer components</a>
                    </div>
                  </div>
                  <a class="dropdown-item" href="#">Mobiles</a>
                  <a class="dropdown-item" href="#">Tablets</a>
                  <a class="dropdown-item" href="#">Laptops</a>
                  <a class="dropdown-item" href="#">Desktops</a>
                  <a class="dropdown-item" href="#">Gaming consoles</a>
                  <a class="dropdown-item" href="#">Car cameras</a>
                  <a class="dropdown-item" href="#">Security cameras</a>
                  <a class="dropdown-item" href="#">Digital cameras</a>
                  <a class="dropdown-item" href="#">Gadgets</a>
                </div>
              </div>
            </div>

            <a class="dropdown-item px-0" href="#">
              Clothing
            </a>

            <div class="position-relative">
              <a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav2Collapse" data-target="#sidebarNav2Collapse">
                TV & home appliances
              </a>

              <div id="sidebarNav2Collapse" class="collapse" data-parent="#sidebarNavExample3">
                <div id="sidebarNav2" class="navbar-nav align-items-start flex-column">
                  <div class="position-relative">
                    <a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav2One" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav2One">
                      TV & video devices
                    </a>
                    <div id="sidebarNav2One" class="navbar-nav flex-column collapse" data-parent="#sidebarNav2">
                      <a class="dropdown-item" href="#">Accessories</a>
                    </div>
                  </div>
                  <div class="position-relative">
                    <a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav2Two" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav2Two">
                      Large appliances
                    </a>
                    <div id="sidebarNav2Two" class="navbar-nav flex-column collapse" data-parent="#sidebarNav2">
                      <a class="dropdown-item" href="#">Kitchen</a>
                      <a class="dropdown-item" href="#">Living room</a>
                    </div>
                  </div>
                  <a class="dropdown-item" href="#">Cooling & air treatment</a>
                  <a class="dropdown-item" href="#">Vacuums & floor care</a>
                </div>
              </div>
            </div>

            <div class="position-relative">
              <a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav3Collapse" data-target="#sidebarNav3Collapse">
                Health & beauty
              </a>

              <div id="sidebarNav3Collapse" class="collapse" data-parent="#sidebarNavExample3">
                <div id="sidebarNav3" class="navbar-nav align-items-start flex-column">
                  <a class="dropdown-item" href="#">Food supplements</a>
                  <a class="dropdown-item" href="#">Skincare</a>
                  <a class="dropdown-item" href="#">Makeup</a>
                  <div class="position-relative">
                    <a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav3One" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav3One">
                      Beauty tools
                    </a>
                    <div id="sidebarNav3One" class="navbar-nav flex-column collapse" data-parent="#sidebarNav3">
                      <a class="dropdown-item" href="#">Men</a>
                      <a class="dropdown-item" href="#">Women</a>
                    </div>
                  </div>
                  <div class="position-relative">
                    <a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav3Two" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav3Two">
                      Medical supplies
                    </a>
                    <div id="sidebarNav3Two" class="navbar-nav flex-column collapse" data-parent="#sidebarNav3">
                      <a class="dropdown-item" href="#">Bath & body</a>
                      <a class="dropdown-item" href="#">Hair care</a>
                      <a class="dropdown-item" href="#">Personal care</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <a class="dropdown-item px-0" href="#">
              Accessories
            </a>

            <a class="dropdown-item px-0" href="#">
              Furniture
            </a>

            <a class="dropdown-item px-0" href="#">
              Casual
            </a>

            <div class="position-relative">
              <a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav4Collapse" data-target="#sidebarNav4Collapse">
                Babies & toys
              </a>

              <div id="sidebarNav4Collapse" class="collapse" data-parent="#sidebarNavExample3">
                <div id="sidebarNav4" class="navbar-nav align-items-start flex-column">
                  <div class="position-relative">
                    <a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav4One" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav4One">
                      Foods
                    </a>
                    <div id="sidebarNav4One" class="navbar-nav flex-column collapse" data-parent="#sidebarNav4">
                      <a class="dropdown-item" href="#">Feeding</a>
                      <a class="dropdown-item" href="#">Milk formula</a>
                    </div>
                  </div>
                  <a class="dropdown-item" href="#">Diapering & potty</a>
                  <a class="dropdown-item" href="#">Nursery</a>
                  <a class="dropdown-item" href="#">Baby personal care</a>
                  <a class="dropdown-item" href="#">Clothing & accessories</a>
                  <a class="dropdown-item" href="#">Baby and & toys</a>
                </div>
              </div>
            </div>

            <a class="dropdown-item px-0" href="#">
              Sports & travel
            </a>

            <a class="dropdown-item px-0" href="#">
              Fashion
            </a>

            <a class="dropdown-item px-0" href="#">
              Glasses
            </a>

            <div class="position-relative">
              <a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav5Collapse" data-target="#sidebarNav5Collapse">
                Automotive & motorcycles
              </a>

              <div id="sidebarNav5Collapse" class="collapse" data-parent="#sidebarNavExample3">
                <div id="sidebarNav5" class="navbar-nav align-items-start flex-column">
                  <div class="position-relative">
                    <a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav5One" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav5One">
                      Automotive
                    </a>
                    <div id="sidebarNav5One" class="navbar-nav flex-column collapse" data-parent="#sidebarNav5">
                      <a class="dropdown-item" href="#">Services & installations</a>
                      <a class="dropdown-item" href="#">Auto oils & fluids</a>
                    </div>
                  </div>
                  <a class="dropdown-item" href="#">Interior accessories</a>
                  <a class="dropdown-item" href="#">Exterior accessories</a>
                  <a class="dropdown-item" href="#">Car audio</a>
                  <a class="dropdown-item" href="#">Auto care</a>
                  <a class="dropdown-item" href="#">Riding gear</a>
                  <div class="position-relative">
                    <a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav6One" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav6One">
                      Automotive
                    </a>
                    <div id="sidebarNav6One" class="navbar-nav flex-column collapse" data-parent="#sidebarNav5">
                      <a class="dropdown-item" href="#">Services & installations</a>
                      <a class="dropdown-item" href="#">Auto oils & fluids</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- End Nav Link -->
          </div>
        </div>
      </div>
      <!-- End Navbar -->
    </div>
  </div>
</div>
<!-- End Categories Section -->
Copy

Component #9

Price

$25$4750125250375500

Gender

73
51

Brand

16
8
35
5
1
5
1

Size

27
18
0
1
2

Category

73
0
51
5
11
5
3
8

Rating

3
10
34
86
102 
<!-- Products & Filters Section -->
<div class="container">
  <div class="row">
    <!-- Filters -->
    <div class="col-lg-3">
      <form>
        <div class="border-bottom pb-4 mb-4">
          <h4>Price</h4>

          <!-- Range Slider -->
          <input class="js-ion-range-slider" type="text"
                 data-hs-ion-range-slider-options='{
                   "extra_classes": "range-slider range-slider-indicator range-slider-grid",
                   "type": "double",
                   "grid": true,
                   "hide_from_to": false,
                   "prefix": "$",
                   "min": 0,
                   "max": 500,
                   "from": 25,
                   "to": 475,
                   "result_min_target_el": "#rangeSliderExample3MinResult",
                   "result_max_target_el": "#rangeSliderExample3MaxResult"
                 }'>
          <div class="d-flex justify-content-between mt-4">
            <input type="text" class="form-control form-control-sm max-w-9rem" id="rangeSliderExample3MinResult">
            <input type="text" class="form-control form-control-sm max-w-9rem mt-0" id="rangeSliderExample3MaxResult">
          </div>
          <!-- End Range Slider -->
        </div>

        <div class="border-bottom pb-4 mb-4">
          <h4>Gender</h4>

          <!-- Checkboxes -->
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="genderMen" checked>
              <label class="custom-control-label text-lh-lg" for="genderMen">Men</label>
            </div>
            <small>73</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="genderWomen" checked>
              <label class="custom-control-label text-lh-lg" for="genderWomen">Women</label>
            </div>
            <small>51</small>
          </div>
          <!-- End Checkboxes -->
        </div>

        <div class="border-bottom pb-4 mb-4">
          <h4>Brand</h4>

          <!-- Checkboxes -->
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="brandAdidas">
              <label class="custom-control-label" for="brandAdidas">Adidas</label>
            </div>
            <small>16</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="brandNewBalance">
              <label class="custom-control-label" for="brandNewBalance">New Balance</label>
            </div>
            <small>8</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="brandNike">
              <label class="custom-control-label" for="brandNike">Nike</label>
            </div>
            <small>35</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="brandFredPerry">
              <label class="custom-control-label" for="brandFredPerry">Fred Perry</label>
            </div>
            <small>5</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="brandTnf">
              <label class="custom-control-label" for="brandTnf">The North Face</label>
            </div>
            <small>1</small>
          </div>
          <!-- End Checkboxes -->

          <!-- View More - Collapse -->
          <div class="collapse" id="collapseBrand">
            <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="brandGucci">
                <label class="custom-control-label" for="brandGucci">Gucci</label>
              </div>
              <small>5</small>
            </div>
            <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="brandMango">
                <label class="custom-control-label" for="brandMango">Mango</label>
              </div>
              <small>1</small>
            </div>
          </div>
          <!-- End View More - Collapse -->

          <!-- Link -->
          <a class="link link-collapse small font-size-1" data-toggle="collapse" href="#collapseBrand" role="button" aria-expanded="false" aria-controls="collapseBrand">
            <span class="link-collapse-default">View more</span>
            <span class="link-collapse-active">View less</span>
            <span class="link-icon ml-1">+</span>
          </a>
          <!-- End Link -->
        </div>

        <div class="border-bottom pb-4 mb-4">
          <h4>Size</h4>

          <!-- Checkboxes -->
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="sizeS" checked>
              <label class="custom-control-label" for="sizeS">S</label>
            </div>
            <small>27</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="sizeM">
              <label class="custom-control-label" for="sizeM">M</label>
            </div>
            <small>18</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="sizeL" checked>
              <label class="custom-control-label" for="sizeL">L</label>
            </div>
            <small>0</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="sizeXL">
              <label class="custom-control-label" for="sizeXL">XL</label>
            </div>
            <small>1</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="sizeXXL">
              <label class="custom-control-label" for="sizeXXL">XXL</label>
            </div>
            <small>2</small>
          </div>
          <!-- End Checkboxes -->
        </div>

        <div class="border-bottom pb-4 mb-4">
          <h4>Category</h4>

          <!-- Checkboxes -->
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="categoryTshirt" checked>
              <label class="custom-control-label text-lh-lg" for="categoryTshirt">T-shirt</label>
            </div>
            <small>73</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="categoryShoes">
              <label class="custom-control-label text-lh-lg" for="categoryShoes">Shoes</label>
            </div>
            <small>0</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="categoryAccessories" checked>
              <label class="custom-control-label text-lh-lg" for="categoryAccessories">Accessories</label>
            </div>
            <small>51</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="categoryTops" checked>
              <label class="custom-control-label" for="categoryTops">Tops</label>
            </div>
            <small>5</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="categoryBottom">
              <label class="custom-control-label" for="categoryBottom">Bottom</label>
            </div>
            <small>11</small>
          </div>
          <!-- End Checkboxes -->

          <!-- View More - Collapse -->
          <div class="collapse" id="collapseCategory">
            <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="categoryShorts">
                <label class="custom-control-label" for="categoryShorts">Shorts</label>
              </div>
              <small>5</small>
            </div>
            <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="categoryHats">
                <label class="custom-control-label" for="categoryHats">Hats</label>
              </div>
              <small>3</small>
            </div>
            <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="categorySocks">
                <label class="custom-control-label" for="categorySocks">Socks</label>
              </div>
              <small>8</small>
            </div>
          </div>
          <!-- End View More - Collapse -->

          <!-- Link -->
          <a class="link link-collapse small font-size-1" data-toggle="collapse" href="#collapseCategory" role="button" aria-expanded="false" aria-controls="collapseCategory">
            <span class="link-collapse-default">View more</span>
            <span class="link-collapse-active">View less</span>
            <span class="link-icon ml-1">+</span>
          </a>
          <!-- End Link -->
        </div>

        <div class="border-bottom pb-4 mb-4">
          <h4>Rating</h4>

          <!-- Checkboxes -->
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-0">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="rating1">
              <label class="custom-control-label" for="rating1">
                <span class="d-block text-warning">
                  <i class="fas fa-star"></i>
                  <i class="far fa-star text-muted"></i>
                  <i class="far fa-star text-muted"></i>
                  <i class="far fa-star text-muted"></i>
                  <i class="far fa-star text-muted"></i>
                </span>
              </label>
            </div>
            <small>3</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-0">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="rating2">
              <label class="custom-control-label" for="rating2">
                <span class="d-block text-warning">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="far fa-star text-muted"></i>
                  <i class="far fa-star text-muted"></i>
                  <i class="far fa-star text-muted"></i>
                </span>
              </label>
            </div>
            <small>10</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-0">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="rating3">
              <label class="custom-control-label" for="rating3">
                <span class="d-block text-warning">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="far fa-star text-muted"></i>
                  <i class="far fa-star text-muted"></i>
                </span>
              </label>
            </div>
            <small>34</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-0">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="rating4">
              <label class="custom-control-label" for="rating4">
                <span class="d-block text-warning">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="far fa-star text-muted"></i>
                </span>
              </label>
            </div>
            <small>86</small>
          </div>
          <div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-0">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="rating5">
              <label class="custom-control-label" for="rating5">
                <span class="d-block text-warning">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                </span>
              </label>
            </div>
            <small>102</small>
          </div>
          <!-- End Checkboxes -->
        </div>

        <button type="button" class="btn btn-sm btn-block btn-soft-secondary transition-3d-hover">Clear All</button>
      </form>
    </div>
    <!-- End Filters -->
  </div>
</div>
<!-- End Products & Filters Section -->
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/ion-rangeslider/js/ion.rangeSlider.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.ion-range-slider.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of ion range slider
    $('.js-ion-range-slider').each(function () {
      var ionRangeSlider = $.HSCore.components.HSIonRangeSlider.init($(this));
    });
  });
</script>
Copy