# Blogs Grid

## 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 -->

## Component #2

- Preview
- HTML

Creative

### This Watch gym partnerships give you perks for working out

Read more

Stories

### Announcing Front Strategies: Ready-to-use rules

Read more

Stories

### Drone Company PrecisionHawk Names New CEO

Read more

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

## Related articles

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 -->