Blogs - List

Component #1

                    
                      <!-- Blog Card -->
                      <div class="container">
                        <article class="card">
                          <div class="row no-gutters">
                            <div class="col-lg-8">
                              <div class="position-relative">
                                <img class="card-img" src="../../assets/img/900x450/img2.jpg" alt="Image Description">
                                <figure class="d-none d-lg-block">
                                  <svg class="ie-curved-x position-absolute top-0 right-0 bottom-0" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100.1 1920" height="100%">
                                    <path fill="#fff" d="M0,1920c0,0,93.4-934.4,0-1920h100.1v1920H0z"/>
                                  </svg>
                                </figure>
                                <figure class="d-lg-none mb-n1">
                                  <svg class="ie-curved-y position-absolute right-0 bottom-0 left-0" 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"/>
                                  </svg>
                                </figure>
                              </div>
                            </div>

                            <div class="col-lg-4">
                              <div class="card-body d-flex flex-column h-100 p-4 p-lg-5">
                                <h2><a class="text-inherit" href="#">How Google Assistant now helps you record stories for kids</a></h2>
                                <p>Google is constantly updating its consumer AI, Google Assistant, with new features.</p>
                                <div class="media align-items-center mt-auto">
                                  <div class="avatar-group">
                                    <a class="avatar avatar-xs avatar-circle" href="#" data-toggle="tooltip" data-placement="top" title="Aaron Larsson">
                                      <img class="avatar-img" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
                                    </a>
                                    <a class="avatar avatar-xs avatar-circle" href="#" data-toggle="tooltip" data-placement="top" title="John O'nolan">
                                      <img class="avatar-img" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
                                    </a>
                                  </div>
                                  <div class="media-body d-flex justify-content-end text-muted font-size-1 ml-2">
                                    July 15
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </article>
                      </div>
                      <!-- End Blog Card -->
                    
                  

Component #2

                    
                      <!-- Blog Card -->
                      <div class="container">
                        <article class="row align-items-lg-center">
                          <div class="col-lg-8">
                            <img class="img-fluid rounded" src="../../assets/img/900x450/img1.jpg" alt="Image Description">
                          </div>

                          <div class="col-lg-4">
                            <div class="py-5 px-lg-3">
                              <span class="d-block mb-2">
                                <a class="small text-body font-weight-bold text-cap" href="#">Business</a>
                              </span>
                              <h2><a class="text-inherit" href="#">Should Product Owners think like entrepreneurs?</a></h2>
                              <p>Front is a financial technology company. We build products. We do it fast and we do it well.</p>
                              <a href="#">Read more <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                            </div>
                          </div>
                        </article>
                      </div>
                      <!-- End Blog Card -->
                    
                  

Component #3

                    
                      <!-- Blogs Section -->
                      <div class="container">
                        <div class="row">
                          <div class="col-lg-8">
                            <!-- Blog -->
                            <article class="row">
                              <div class="col-md-5">
                                <img class="card-img" src="../../assets/img/400x500/img7.jpg" alt="Image Description">
                              </div>
                              <div class="col-md-7">
                                <div class="card-body d-flex flex-column h-100 px-0">
                                  <span class="d-block mb-2">
                                    <a class="font-weight-bold" href="#">Business</a>
                                  </span>
                                  <h3><a class="text-inherit" href="#">Front becomes an official Instagram Marketing Partner</a></h3>
                                  <p>Great news we're eager to share.</p>
                                  <div class="media align-items-center mt-auto">
                                    <a class="avatar avatar-sm avatar-circle mr-3" href="#">
                                      <img class="avatar-img" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
                                    </a>
                                    <div class="media-body">
                                      <span class="text-dark">
                                        <a class="d-inline-block text-inherit font-weight-bold" href="#">Aaron Larsson</a>
                                      </span>
                                      <small class="d-block">Feb 15, 2020</small>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </article>
                            <!-- End Blog -->
                          </div>
                        </div>
                      </div>
                      <!-- End Blogs Section -->