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

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

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