Logo v3.2.2
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v3.2.2
  • Docs
  • Snippets
  • Snippets
  • Introduction
  • Navbar / Heroes
  • Headers (Navbar)
  • Hero Sections
  • Foundations
  • Features
    General Stats Step Navs (Tabs)
  • Icon Blocks
  • Cards
    Grid List
  • Testimonials
  • Pricing
  • Team Sections
  • Call-to-Action (CTA)
  • Gallery
  • Clients
  • FAQ
  • Comments
  • User Profile
  • Sidebar Examples
  • Content Sections
  • Forms
  • Authentication
  • Feedback
  • Filters
  • Search
  • Subscribe
  • Contact / Footer
  • Contact Sections
  • Footer

Sidebar Examples

Component #1

  • Preview
  • HTML
  • JS

Newsletter

Get special offers on the latest developments from Front.

Productivity

  • Here's how to dodge distractions

    Feb 08, 2020

  • Ideas to stay productive

    Feb 09, 2020

  • Classic design principles

    Feb 10, 2020

Front culture

Image Description
Announcing a free plan for small teams
Image Description
Mapping the first family tree for Front office
Image Description
Felling eyeing first major Classic win in 2018

Tags

Business Adventure Community Announcements Tutorials Resources Classic Photography Interview
              
                <!-- 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>