Blogs Grid - Snippets | Front - Multipurpose Responsive Template

Component #1

Preview
HTML

Discover more

Read the blog

Have a meaningful impact

Opportunities to Front who have proven to be good at executing on them.

Read the blog

Documentation

Whether you're a startup or a global enterprise, learn how to integrate with Front.

Learn about other solutions

Explore the Snippets tool

Quickly Front sample components, copy-paste codes.

Want to read more? Go here

              
                <!-- Card Grid -->
                <div class="container content-space-2 content-space-lg-3">
                  <!-- Heading -->
                  <div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5">
                    <h2>Discover more</h2>
                  </div>
                  <!-- End Heading -->

                  <div class="overflow-hidden">
                    <div class="row gx-lg-7">
                      <div class="col-sm-6 col-lg-4 mb-5">
                        <!-- Card -->
                        <a class="card card-flush h-100" href="#" data-aos="fade-up">
                          <img class="card-img" src="../assets/img/480x320/img33.jpg" alt="Image Description">
                          <div class="card-body">
                            <span class="card-subtitle text-body">Read the blog</span>
                            <h4 class="card-title text-inherit">Have a meaningful impact</h4>
                            <p class="card-text text-body">Opportunities to Front who have proven to be good at executing on them.</p>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-6 col-lg-4 mb-5">
                        <!-- Card -->
                        <a class="card card-flush h-100" href="#" data-aos="fade-up" data-aos-delay="150">
                          <img class="card-img" src="../assets/img/480x320/img34.jpg" alt="Image Description">
                          <div class="card-body">
                            <span class="card-subtitle text-body">Read the blog</span>
                            <h4 class="card-title text-inherit">Documentation</h4>
                            <p class="card-text text-body">Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-6 col-lg-4 mb-5">
                        <!-- Card -->
                        <a class="card card-flush h-100" href="#" data-aos="fade-up" data-aos-delay="200">
                          <img class="card-img" src="../assets/img/480x320/img35.jpg" alt="Image Description">
                          <div class="card-body">
                            <span class="card-subtitle text-body">Learn about other solutions</span>
                            <h4 class="card-title text-inherit">Explore the Snippets tool</h4>
                            <p class="card-text text-body">Quickly Front sample components, copy-paste codes.</p>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>

                  <!-- Card Info -->
                  <div class="text-center">
                    <div class="card card-info-link card-sm">
                      <div class="card-body">
                        Want to read more? <a class="card-link ms-2" href="#">Go here <span class="bi-chevron-right small ms-1"></span></a>
                      </div>
                    </div>
                  </div>
                  <!-- End Card Info -->
                </div>
                <!-- End Card Grid -->

Creative

This Watch gym partnerships give you perks for working out

Stories

Announcing Front Strategies: Ready-to-use rules

Stories

Drone Company PrecisionHawk Names New CEO

Want to read more? Go here

              
                <!-- Card Grid -->
                <div class="container content-space-2 content-space-b-lg-3">
                  <div class="row">
                    <div class="col-sm-6 col-lg-4 mb-3 mb-sm-7">
                      <!-- Card -->
                      <a class="card card-stretched-vertical card-transition bg-img-start gradient-y-overlay-sm-gray-900" href="../blog-article.html" style="background-image: url(../assets/img/400x500/img9.jpg); min-height: 25rem;">
                        <div class="card-header">
                          <span class="card-subtitle text-white">Creative</span>
                        </div>

                        <div class="card-footer">
                          <h3 class="card-title text-white">This Watch gym partnerships give you perks for working out</h3>
                          <p class="card-link link-light">Read more <i class="bi-chevron-right small ms-1"></i></p>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-3 mb-sm-7">
                      <!-- Card -->
                      <a class="card card-stretched-vertical card-transition bg-dark" href="../blog-article.html" style="background-image: url(../assets/svg/components/wave-pattern-light.svg); min-height: 25rem;">
                        <div class="card-header">
                          <span class="card-subtitle text-white">Stories</span>
                        </div>

                        <div class="card-footer">
                          <h3 class="card-title text-white">Announcing Front Strategies: Ready-to-use rules</h3>
                          <p class="card-link link-light">Read more <i class="bi-chevron-right small ms-1"></i></p>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-3 mb-sm-7">
                      <!-- Card -->
                      <a class="card card-stretched-vertical card-transition bg-img-start gradient-y-overlay-sm-gray-900" href="../blog-article.html" style="background-image: url(../assets/img/400x500/img2.jpg); min-height: 25rem;">
                        <div class="card-header">
                          <span class="card-subtitle text-white">Stories</span>
                        </div>

                        <div class="card-footer">
                          <h3 class="card-title text-white">Drone Company PrecisionHawk Names New CEO</h3>
                          <p class="card-link link-light">Read more <i class="bi-chevron-right small ms-1"></i></p>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <!-- Card Info -->
                  <div class="text-center">
                    <div class="card card-info-link card-sm">
                      <div class="card-body">
                        Want to read more? <a class="card-link ms-2" href="#">Go here <span class="bi-chevron-right small ms-1"></span></a>
                      </div>
                    </div>
                  </div>
                  <!-- End Card Info -->
                </div>
                <!-- End Card Grid -->

Component #3

Preview
HTML

Better is when everything works together

Learn how your Google devices can do more.

July 15

Featured

Announcing Front Tutorials: Master Adobe Ai - Part II

A new tutorial to make it easier to master Adobe Ai.

July 15

Should You Buy An Apple Pencil?

The Apple Pencil is an expensive device that comes with some interesting features, but not everyone needs them.

July 15

              
                <!-- Card Grid -->
                <div class="container content-space-2 content-space-lg-3">
                  <div class="row">
                    <div class="col-sm-6 col-lg-4 mb-4">
                      <!-- Card -->
                      <div class="card h-100">
                        <div class="shape-container">
                          <img class="card-img-top" src="../assets/img/500x280/img1.jpg" alt="Image Description">
                          
                          <!-- Shape -->
                          <div class="shape shape-bottom zi-1" style="margin-bottom: -.25rem">
                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
                              <path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"></path>
                            </svg>
                          </div>
                          <!-- End Shape -->
                        </div>

                        <!-- Card Body -->
                        <div class="card-body">
                          <h3 class="card-title">
                            <a class="text-dark" href="../blog-article.html">Better is when everything works together</a>
                          </h3>

                          <p class="card-text">Learn how your Google devices can do more.</p>
                        </div>
                        <!-- End Card Body -->

                        <!-- Card Footer -->
                        <div class="card-footer">
                          <div class="d-flex align-items-center">
                            <div class="flex-shrink-0 avatar-group avatar-group-xs">
                              <a class="avatar avatar-xs avatar-circle" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Nataly Gaga">
                                <img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                              </a>
                              <a class="avatar avatar-xs avatar-circle" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Emily Milda">
                                <img class="avatar-img" src="../assets/img/160x160/img8.jpg" alt="Image Description">
                              </a>
                            </div>

                            <div class="flex-grow-1">
                              <div class="d-flex justify-content-end">
                                <p class="card-text">July 15</p>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Card Footer -->
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-4">
                      <!-- Card -->
                      <div class="card bg-dark h-100" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
                        <!-- Card Body -->
                        <div class="card-body">
                          <div class="mb-5">
                            <span class="badge bg-primary">Featured</span>
                          </div>

                          <h3 class="card-title">
                            <a class="text-white" href="../blog-article.html">Announcing Front Tutorials: Master Adobe Ai - Part II</a>
                          </h3>

                          <p class="text-white-70">A new tutorial to make it easier to master Adobe Ai.</p>
                        </div>
                        <!-- End Card Body -->
                        
                        <!-- Card Footer -->
                        <div class="card-footer">
                          <div class="d-flex align-items-center">
                            <div class="flex-shrink-0 avatar-group avatar-group-xs">
                              <a class="avatar avatar-xs avatar-circle" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Aaron Larsson">
                                <img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                              </a>
                            </div>
                            
                            <div class="flex-grow-1">
                              <div class="d-flex justify-content-end">
                                <p class="card-text text-white-70">July 15</p>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Card Footer -->
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-4">
                      <!-- Card -->
                      <div class="card h-100">
                        <div class="shape-container">
                          <img class="card-img-top" src="../assets/img/500x280/img3.jpg" alt="Image Description">
                          
                          <!-- Shape -->
                          <div class="shape shape-bottom zi-1" style="margin-bottom: -.25rem">
                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
                              <path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"></path>
                            </svg>
                          </div>
                          <!-- End Shape -->
                        </div>

                        <!-- Card Body -->
                        <div class="card-body">
                          <h3 class="card-title">
                            <a class="text-dark" href="../blog-article.html">Should You Buy An Apple Pencil?</a>
                          </h3>

                          <p class="card-text">The Apple Pencil is an expensive device that comes with some interesting features, but not everyone needs them.</p>
                        </div>
                        <!-- End Card Body -->

                        <!-- Card Footer -->
                        <div class="card-footer">
                          <div class="d-flex align-items-center">
                            <div class="flex-shrink-0 avatar-group avatar-group-xs">
                              <a class="avatar avatar-xs avatar-circle" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Hanna Wolfe">
                                <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                              </a>
                              <a class="avatar avatar-xs avatar-circle" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="John O'nolan">
                                <img class="avatar-img" src="../assets/img/160x160/img6.jpg" alt="Image Description">
                              </a>
                            </div>

                            <div class="flex-grow-1">
                              <div class="d-flex justify-content-end">
                                <p class="card-text">July 15</p>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Card Footer -->
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Card Grid -->

Component #4

Preview
HTML

Product

Better is when everything works together

Tech

Should You Buy An Apple Pencil?

Product

This Watch gym partnerships give you perks for working out

Tech

Drone Company PrecisionHawk Names New CEO

              
                <!-- Card Grid -->
                <div class="container">
                  <div class="w-lg-75 border-top content-space-2 mx-lg-auto">
                    <!-- Heading -->
                    <div class="mb-3 mb-sm-5">
                      <h2>Related articles</h2>
                    </div>
                    <!-- End Heading -->

                    <div class="row">
                      <div class="col-md-6">
                        <!-- Card -->
                        <div class="border-bottom h-100 py-5">
                          <div class="row justify-content-between">
                            <div class="col-6">
                              <a class="text-cap" href="#">Product</a>
                              <h4 class="mb-0">
                                <a class="text-dark" href="../blog-article.html">Better is when everything works together</a>
                              </h4>
                            </div>
                            <!-- End Col -->

                            <div class="col-5">
                              <img class="img-fluid rounded" src="../assets/img/500x280/img1.jpg" alt="Image Description">
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-md-6">
                        <!-- Card -->
                        <div class="border-bottom h-100 py-5">
                          <div class="row justify-content-between">
                            <div class="col-6">
                              <a class="text-cap" href="#">Tech</a>
                              <h4 class="mb-0">
                                <a class="text-dark" href="../blog-article.html">Should You Buy An Apple Pencil?</a>
                              </h4>
                            </div>
                            <!-- End Col -->

                            <div class="col-5">
                              <img class="img-fluid rounded" src="../assets/img/500x280/img3.jpg" alt="Image Description">
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-md-6">
                        <!-- Card -->
                        <div class="border-bottom h-100 py-5">
                          <div class="row justify-content-between">
                            <div class="col-6">
                              <a class="text-cap" href="#">Product</a>
                              <h4 class="mb-0">
                                <a class="text-dark" href="../blog-article.html">This Watch gym partnerships give you perks for working out</a>
                              </h4>
                            </div>
                            <!-- End Col -->

                            <div class="col-5">
                              <img class="img-fluid rounded" src="../assets/img/500x280/img5.jpg" alt="Image Description">
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-md-6">
                        <!-- Card -->
                        <div class="border-bottom h-100 py-5">
                          <div class="row justify-content-between">
                            <div class="col-6">
                              <a class="text-cap" href="#">Tech</a>
                              <h4 class="mb-0">
                                <a class="text-dark" href="../blog-article.html">Drone Company PrecisionHawk Names New CEO</a>
                              </h4>
                            </div>
                            <!-- End Col -->

                            <div class="col-5">
                              <img class="img-fluid rounded" src="../assets/img/500x280/img7.jpg" alt="Image Description">
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                </div>
                <!-- End Card Grid -->