Blogs - List
Component #1
<!-- Blog Card Section -->
<div class="container">
<div class="w-lg-75 border-top space-2 mx-lg-auto">
<div class="mb-3 mb-sm-5">
<h3>Related stories</h3>
</div>
<div class="row">
<div class="col-md-6">
<!-- Blog Card -->
<article class="border-bottom h-100 py-5">
<div class="row justify-content-between">
<div class="col-6">
<a class="d-block small font-weight-bold text-cap mb-2" href="#">Product</a>
<h4 class="mb-0"><a class="text-inherit" href="#">Better is when everything works together</a></h4>
</div>
<div class="col-5">
<img class="img-fluid" src="../../assets/img/500x280/img1.jpg" alt="Image Description">
</div>
</div>
</article>
<!-- End Blog Card -->
</div>
<div class="col-md-6">
<!-- Blog Card -->
<article class="border-bottom h-100 py-5">
<div class="row justify-content-between">
<div class="col-6">
<a class="d-block small font-weight-bold text-cap mb-2" href="#">Tech</a>
<h4 class="mb-0"><a class="text-inherit" href="#">Should You Buy An Apple Pencil?</a></h4>
</div>
<div class="col-5">
<img class="img-fluid" src="../../assets/img/500x280/img3.jpg" alt="Image Description">
</div>
</div>
</article>
<!-- End Blog Card -->
</div>
<div class="col-md-6">
<!-- Blog Card -->
<article class="border-bottom h-100 py-5">
<div class="row justify-content-between">
<div class="col-6">
<a class="d-block small font-weight-bold text-cap mb-2" href="#">Product</a>
<h4 class="mb-0"><a class="text-inherit" href="#">This Watch gym partnerships give you perks for working out</a></h4>
</div>
<div class="col-5">
<img class="img-fluid" src="../../assets/img/500x280/img5.jpg" alt="Image Description">
</div>
</div>
</article>
<!-- End Blog Card -->
</div>
<div class="col-md-6">
<!-- Blog Card -->
<article class="border-bottom h-100 py-5">
<div class="row justify-content-between">
<div class="col-6">
<a class="d-block small font-weight-bold text-cap mb-2" href="#">Tech</a>
<h4 class="mb-0"><a class="text-inherit" href="#">Drone Company PrecisionHawk Names New CEO</a></h4>
</div>
<div class="col-5">
<img class="img-fluid" src="../../assets/img/500x280/img7.jpg" alt="Image Description">
</div>
</div>
</article>
<!-- End Blog Card -->
</div>
</div>
</div>
</div>
<!-- End Blog Card Section -->
Component #2
Business
Front becomes an official Instagram Marketing Partner
Great news we're eager to share.
Aaron Larsson
Feb 15, 2020
<!-- 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 -->
Component #3
<!-- Blogs Section -->
<div class="container">
<div class="row">
<div class="col-lg-8">
<!-- Blog -->
<article>
<a class="card align-items-start flex-wrap flex-row h-380rem gradient-x-overlay-sm-navy bg-img-hero rounded-pseudo transition-3d-hover" href="#" style="background-image: url(../assets/img/900x450/img1.jpg);">
<div class="card-header border-0 bg-transparent w-100">
<div class="media align-items-center">
<span class="avatar avatar-sm avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
</span>
<div class="media-body">
<span class="d-inline-block text-white font-weight-bold">Aaron Larsson</span>
<small class="d-block text-white-70">Jan 09, 2020</small>
</div>
</div>
</div>
<div class="card-footer border-0 bg-transparent mt-auto">
<h3 class="h2 text-white">Facebook is creating a news section in Watch to feature breaking news</h3>
<p class="text-white-70 mb-0">Facebook launched the Watch platform in August</p>
</div>
</a>
</article>
<!-- End Blog -->
</div>
</div>
</div>
<!-- End Blogs Section -->
Component #4
Business
Should Product Owners think like entrepreneurs?
Front is a financial technology company. We build products. We do it fast and we do it well.
Read more
<!-- 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 #5
How Google Assistant now helps you record stories for kids
Google is constantly updating its consumer AI, Google Assistant, with new features.
July 15
<!-- 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 -->