博客s List - Snippets | Front - 基于Boostrap5的多用途响应式模板库

Component #1

预览
HTML

企业贸易

Front becomes an official Instagram Marketing Partner

Great news we're eager to share.

Aaron Larsson

Feb 15, 2021

Announcements

Announcing a free plan for small teams

At Wake, our mission has always been focused on bringing openness.

Hanna Wolfe

Feb 4, 2021

              
                <div class="d-grid gap-7">
                  <!-- Card -->
                  <div class="card card-flush card-stretched-vertical">
                    <div class="row">
                      <div class="col-sm-5">
                        <img class="card-img" src="../assets/img/400x500/img7.jpg" alt="图片描述内容">
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-7">
                        <!-- Card Body -->
                        <div class="card-body">
                          <div class="mb-2">
                            <a class="card-link" href="#">Business</a>
                          </div>

                          <h3 class="card-title">
                            <a class="text-dark" href="../blog-article.html">Front becomes an official Instagram Marketing Partner</a>
                          </h3>
                          
                          <p class="card-text">Great news we're eager to share.</p>
                          
                          <!-- Card Footer -->
                          <div class="card-footer">
                            <div class="d-flex">
                              <div class="flex-shrink-0">
                                <a class="avatar avatar-circle" href="../blog-author-profile.html">
                                  <img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="图片描述内容">
                                </a>
                              </div>
                            
                              <div class="flex-grow-1 ms-3">
                                <a class="card-link link-dark" href="../blog-author-profile.html">Aaron Larsson</a>
                                <p class="card-text small">Feb 15, 2021</p>
                              </div>
                            </div>
                          </div>
                          <!-- End Card Footer -->
                        </div>
                        <!-- End Card Body -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                  <!-- End Card -->

                  <!-- Card -->
                  <div class="card card-flush card-stretched-vertical">
                    <div class="row">
                      <div class="col-sm-5">
                        <img class="card-img" src="../assets/img/400x500/img5.jpg" alt="图片描述内容">
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-7">
                        <!-- Card Body -->
                        <div class="card-body">
                          <div class="mb-2">
                            <a class="card-link" href="#">Announcements</a>
                          </div>

                          <h3 class="card-title">
                            <a class="text-dark" href="../blog-article.html">Announcing a free plan for small teams</a>
                          </h3>
                          
                          <p class="card-text">At Wake, our mission has always been focused on bringing openness.</p>
                          
                          <!-- Card Footer -->
                          <div class="card-footer">
                            <div class="d-flex">
                              <div class="flex-shrink-0">
                                <a class="avatar avatar-circle" href="../blog-author-profile.html">
                                  <img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="图片描述内容">
                                </a>
                              </div>
                            
                              <div class="flex-grow-1 ms-3">
                                <a class="card-link link-dark" href="../blog-author-profile.html">Hanna Wolfe</a>
                                <p class="card-text small">Feb 4, 2021</p>
                              </div>
                            </div>
                          </div>
                          <!-- End Card Footer -->
                        </div>
                        <!-- End Card Body -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                  <!-- End Card -->
                </div>

企业贸易

Should Product Owners think like entrepreneurs?

Front is a financial technology company. We build products. We do it fast and we do it well.

              
                <!-- Card -->
                <div class="card card-flush">
                  <div class="row align-items-md-center">
                    <div class="col-md-8">
                      <img class="card-img rounded-2" src="../assets/img/900x450/img1.jpg" alt="图片描述内容">
                    </div>
                    <!-- End Col -->

                    <div class="col-md-4">
                      <div class="card-body">
                        <span class="card-subtitle">Business</span>
                        <h2 class="card-title"><a class="text-dark" href="../blog-article.html">Should Product Owners think like entrepreneurs?</a></h2>
                        <p class="card-text">Front is a financial technology company. We build products. We do it fast and we do it well.</p>
                        <a class="card-link" href="#">阅读更多 <i class="bi-chevron-right small ms-1"></i></a>
                      </div>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Card -->

Component #3

预览
HTML

How Google Assistant now helps you record stories for kids

Google is constantly updating its consumer AI, Google Assistant, with new features.

July 15

              
                <!-- Card Grid -->
                <div class="container content-space-2 content-space-lg-3">
                  <!-- Card -->
                  <div class="card card-stretched-vertical">
                    <div class="row gx-0">
                      <div class="col-lg-8">
                        <div class="shape-container overflow-hidden">
                          <img class="card-img" src="../assets/img/900x450/img2.jpg" alt="图片描述内容">
                          
                          <!-- Shape -->
                          <div class="shape shape-end d-none d-lg-block zi-1">
                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100.1 1920" height="101%">
                              <path fill="#fff" d="M0,1920c0,0,93.4-934.4,0-1920h100.1v1920H0z"/>
                            </svg>
                          </div>
                          <!-- End Shape -->
                          
                          <!-- Shape -->
                          <div class="shape shape-bottom d-lg-none 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>
                      </div>
                      <!-- End Col -->

                      <div class="col-lg-4">
                        <!-- Card Body -->
                        <div class="card-body">
                          <h3 class="card-title">
                            <a class="text-dark" href="../blog-article.html">How Google Assistant now helps you record stories for kids</a>
                          </h3>

                          <p class="card-text">Google is constantly updating its consumer AI, Google Assistant, with new features.</p>

                          <!-- 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="图片描述内容">
                                </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/img4.jpg" alt="图片描述内容">
                                </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 Body -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                  <!-- End Card -->
                </div>
                <!-- End Card Grid -->