This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<!--Block start-->
<div class="block-area">
<!--block title-->
<div class="block-title-6">
<h4 class="h5 border-primary">
<span class="bg-primary text-white">Lifestyle</span>
</h4>
</div>
<div class="row">
<!--post left start-->
<div class="col-lg-6">
<article class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_466-261 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img1.jpg" alt="Image description">
</a>
</div>
<div class="card-body">
<!--title-->
<h2 class="card-title h1-sm h3-lg">
<a href="#">What You Need to Know About Safe Deposit Boxes</a>
</h2>
<!-- author, date & comments -->
<div class="card-text mb-2 text-muted small">
<span class="d-none d-sm-inline me-1">
<a class="fw-bold" href="#">John Doe</a>
</span>
<time datetime="2019-10-22">Oct 22, 2019</time>
<span title="9 comment" class="m-0 float-end">
<span class="icon-comments"></span> 9
</span>
</div>
<!--text content-->
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</article>
</div>
<!--post right list start-->
<div class="col-lg-6">
<div class="row">
<!--post start-->
<article class="col-6">
<div class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_165-92 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/165x92/img1.jpg" alt="Image description">
</a>
</div>
<!-- title & date -->
<div class="card-body">
<h3 class="card-title h6 h5-sm h6-lg"><a href="#">Callum Wilson ready to fulfil ‘cage’ dreams of playing for England</a></h3>
<div class="card-text text-muted small">
<time datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</article>
<!--post start-->
<article class="col-6">
<div class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_165-92 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/165x92/img2.jpg" alt="Image description">
</a>
</div>
<!-- title & date -->
<div class="card-body">
<h3 class="card-title h6 h5-sm h6-lg"><a href="#">Fans celebrate in Paris after side reaches World Cup</a></h3>
<div class="card-text text-muted small">
<time datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</article>
<!--post start-->
<article class="col-6">
<div class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_165-92 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/165x92/img3.jpg" data-src="../../assets/img/165x92/img3.jpg" alt="Image description">
</a>
</div>
<!-- title & date -->
<div class="card-body">
<h3 class="card-title h6 h5-sm h6-lg"><a href="#">Referee whose jaw was broken by players forgives his attackers</a></h3>
<div class="card-text text-muted small">
<time datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</article>
<!--post start-->
<article class="col-6">
<div class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_165-92 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/165x92/img4.jpg" alt="Image description">
</a>
</div>
<!-- title & date -->
<div class="card-body">
<h3 class="card-title h6 h5-sm h6-lg"><a href="#">From doubted to dominator: Pogba’s World Cup evolution</a></h3>
<div class="card-text text-muted small">
<time datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</article>
</div>
</div>
<!--end post right list-->
</div>
</div>
<!--End Block-->
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This block component is same like block content 3, just add block color in block-area classes
<!-- Block start -->
<div class="block-area block-danger">
....
....
</div>
<!--End Block-->
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<!-- block start -->
<div class="block-area">
<!--block title-->
<div class="block-title-6">
<h4 class="h5 border-primary">
<span class="bg-primary text-white">Lifestyle</span>
</h4>
</div>
<!--post left start-->
<div class="big-post">
<article class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_466-261 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img1.jpg" alt="Image description">
</a>
</div>
<div class="card-body">
<!--title-->
<h2 class="card-title h1-sm h3-md">
<a href="#">What You Need to Know About Safe Deposit Boxes</a>
</h2>
<!-- author, date & comments -->
<div class="card-text mb-2 text-muted small">
<span class="d-none d-sm-inline me-1">
<a class="fw-bold" href="#">John Doe</a>
</span>
<time datetime="2019-10-22">Oct 22, 2019</time>
<span title="9 comment" class="m-0 float-end">
<span class="icon-comments"></span> 9
</span>
</div>
<!--text content-->
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</article>
</div>
<!--end post left-->
<!--post right list start-->
<div class="small-post">
<div class="row">
<!--post start-->
<article class="col-6">
<div class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_165-92 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/165x92/img1.jpg" alt="Image description">
</a>
</div>
<!-- title & date -->
<div class="card-body">
<h3 class="card-title h6 h5-sm h6-md"><a href="#">Callum Wilson ready to fulfil ‘cage’ dreams of playing for England</a></h3>
<div class="card-text text-muted small">
<time datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</article>
<!--post start-->
<article class="col-6">
<div class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_165-92 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/165x92/img2.jpg" alt="Image description">
</a>
</div>
<!-- title & date -->
<div class="card-body">
<h3 class="card-title h6 h5-sm h6-md"><a href="#">Fans celebrate in Paris after side reaches World Cup</a></h3>
<div class="card-text text-muted small">
<time datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</article>
<!--post start-->
<article class="col-6">
<div class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_165-92 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/165x92/img3.jpg" alt="Image description">
</a>
</div>
<!-- title & date -->
<div class="card-body">
<h3 class="card-title h6 h5-sm h6-md"><a href="#">Referee whose jaw was broken by players forgives his attackers</a></h3>
<div class="card-text text-muted small">
<time datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</article>
<!--post start-->
<article class="col-6">
<div class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_165-92 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/165x92/img4.jpg" alt="Image description">
</a>
</div>
<!-- title & date -->
<div class="card-body">
<h3 class="card-title h6 h5-sm h6-md"><a href="#">From doubted to dominator: Pogba’s World Cup evolution</a></h3>
<div class="card-text text-muted small">
<time datetime="2019-10-22">Oct 22, 2019</time>
</div>
</div>
</div>
</article>
</div>
</div><!--end post right list-->
</div>
<!-- end block -->