Sidebar Examples
Component #1
Newsletter
Get special offers on the latest developments from Front.
Productivity
<!-- Card Grid -->
<div class="container content-space-1">
<div class="row justify-content-lg-between">
<div class="col-lg-8 mb-10 mb-lg-0">
</div>
<!-- End Col -->
<div class="col-lg-3">
<div class="mb-7">
<div class="mb-3">
<h4>Newsletter</h4>
</div>
<!-- Form -->
<form>
<div class="mb-2">
<input type="text" class="form-control" placeholder="Enter email" aria-label="Enter email">
</div>
<div class="d-grid">
<button type="button" class="btn btn-primary">Subscribe</button>
</div>
</form>
<!-- End Form -->
<p class="form-text">Get special offers on the latest developments from Front.</p>
</div>
<div class="mb-7">
<div class="mb-3">
<h4>Productivity</h4>
</div>
<!-- List Group -->
<ul class="list-group list-group-lg">
<!-- Item -->
<li class="list-group-item">
<a href="#">
<div class="row align-items-center">
<div class="col">
<h6 class="mb-1">Here's how to dodge distractions</h6>
<p class="text-body fs-5 mb-0">Feb 08, 2020</p>
</div>
<!-- End Col -->
<div class="col-auto">
<i class="bi-chevron-right"></i>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item">
<a href="#">
<div class="row align-items-center">
<div class="col">
<h6 class="mb-1">Ideas to stay productive</h6>
<p class="text-body fs-5 mb-0">Feb 09, 2020</p>
</div>
<!-- End Col -->
<div class="col-auto">
<i class="bi-chevron-right"></i>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item">
<a href="#">
<div class="row align-items-center">
<div class="col">
<h6 class="mb-1">Classic design principles</h6>
<p class="text-body fs-5 mb-0">Feb 10, 2020</p>
</div>
<!-- End Col -->
<div class="col-auto">
<i class="bi-chevron-right"></i>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</a>
</li>
<!-- End Item -->
</ul>
<!-- End List Group -->
</div>
<!-- Sticky Block Start Point -->
<div id="stickyBlockStartPoint"></div>
<div class="js-sticky-block"
data-hs-sticky-block-options='{
"parentSelector": "#stickyBlockStartPoint",
"targetSelector": "#header",
"breakpoint": "md",
"startPoint": "#stickyBlockStartPoint",
"endPoint": "#stickyBlockEndPoint",
"stickyOffsetTop": 80
}'>
<div class="mb-7">
<div class="mb-3">
<h4>Front culture</h4>
</div>
<div class="d-grid gap-3">
<!-- Card -->
<a class="d-block" href="../blog-article.html">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="avatar avatar-lg">
<img class="avatar-img" src="../assets/img/320x320/img1.jpg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<h6 class="text-inherit mb-0">Announcing a free plan for small teams</h6>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="d-block" href="../blog-article.html">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="avatar avatar-lg">
<img class="avatar-img" src="../assets/img/320x320/img2.jpg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<h6 class="text-inherit mb-0">Mapping the first family tree for Front office</h6>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="d-block" href="../blog-article.html">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="avatar avatar-lg">
<img class="avatar-img" src="../assets/img/320x320/img3.jpg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<h6 class="text-inherit mb-0">Felling eyeing first major Classic win in 2018</h6>
</div>
</div>
</a>
<!-- End Card -->
</div>
</div>
<div class="mb-7">
<div class="mb-3">
<h4>Tags</h4>
</div>
<a class="btn btn-soft-secondary btn-sm mb-1" href="#">Business</a>
<a class="btn btn-soft-secondary btn-sm mb-1" href="#">Adventure</a>
<a class="btn btn-soft-secondary btn-sm mb-1" href="#">Community</a>
<a class="btn btn-soft-secondary btn-sm mb-1" href="#">Announcements</a>
<a class="btn btn-soft-secondary btn-sm mb-1" href="#">Tutorials</a>
<a class="btn btn-soft-secondary btn-sm mb-1" href="#">Resources</a>
<a class="btn btn-soft-secondary btn-sm mb-1" href="#">Classic</a>
<a class="btn btn-soft-secondary btn-sm mb-1" href="#">Photography</a>
<a class="btn btn-soft-secondary btn-sm mb-1" href="#">Interview</a>
</div>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Card Grid -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF STICKY BLOCKS
// =======================================================
new HSStickyBlock('.js-sticky-block', {
targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
})
})()
</script>