Block 16 - on 3 columns
<!--Block start-->
<div class="block-area">
<!--block title-->
<div class="block-title-6">
<h4 class="h5 border-primary">
<span class="bg-primary text-white">Popular news</span>
</h4>
</div>
<div class="row">
<!--big post-->
<div class="col-md-4">
<div class="card card-full hover-a mb-5 mb-md-0">
<!--thumbnail-->
<div class="ratio_337-337 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/337x337/img1.jpg" alt="Image description">
</a>
</div>
<div class="card-body">
<!-- 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="float-end">
<span class="icon-comments"></span> 9
</span>
</div>
<!--title-->
<h2 class="card-title h3 h1-sm h3-md h1-lg">
<a href="#">Ferrari improves painting process so perfect</a>
</h2>
</div>
</div>
</div>
<!-- small post -->
<div class="col-md-8">
<div class="row">
<!-- post start -->
<article class="col-6 col-sm-4">
<div class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_360-202 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 h5">
<a href="#">GB's Bankes wins snowboard cross silver at World Champs</a>
</h2>
<!-- date & comments -->
<div class="card-text mb-2 text-muted small">
<time datetime="2019-10-22">Oct 22, 2019</time>
<span title="9 comment" class="float-end">
<span class="icon-comments"></span> 9
</span>
</div>
</div>
</div>
</article>
<!-- post start -->
<article class="col-6 col-sm-4">
<div class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_360-202 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img2.jpg" alt="Image description">
</a>
</div>
<div class="card-body">
<!--title-->
<h2 class="card-title h5">
<a href="#">Back From the Dead, Parma Embraces a Football School arena</a>
</h2>
<!-- date & comments -->
<div class="card-text mb-2 text-muted small">
<time datetime="2019-10-22">Oct 22, 2019</time>
<span title="9 comment" class="float-end">
<span class="icon-comments"></span> 9
</span>
</div>
</div>
</div>
</article>
<!-- post start -->
<article class="col-6 col-sm-4">
<div class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_360-202 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img3.jpg" alt="Image description">
</a>
</div>
<div class="card-body">
<!--title-->
<h2 class="card-title h5">
<a href="#">How NBA players reacted to the shocking Kristaps Porzingis trade</a>
</h2>
<!-- date & comments -->
<div class="card-text mb-2 text-muted small">
<time datetime="2019-10-22">Oct 22, 2019</time>
<span title="9 comment" class="float-end">
<span class="icon-comments"></span> 9
</span>
</div>
</div>
</div>
</article>
<!-- post start -->
<article class="col-6 col-sm-4">
<div class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_360-202 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img4.jpg" alt="Image description">
</a>
</div>
<div class="card-body">
<!--title-->
<h2 class="card-title h5">
<a href="#">Bowen's Super Bowl LIII game plans: Which defense will get stops?</a>
</h2>
<!-- date & comments -->
<div class="card-text mb-2 text-muted small">
<time datetime="2019-10-22">Oct 22, 2019</time>
<span title="9 comment" class="float-end">
<span class="icon-comments"></span> 9
</span>
</div>
</div>
</div>
</article>
<!-- post start -->
<article class="col-6 col-sm-4">
<div class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_360-202 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img5.jpg" alt="Image description">
</a>
</div>
<div class="card-body">
<!--title-->
<h2 class="card-title h5">
<a href="#">MotoGP: Which team needs what in 2019?</a>
</h2>
<!-- date & comments -->
<div class="card-text mb-2 text-muted small">
<time datetime="2019-10-22">Oct 22, 2019</time>
<span title="9 comment" class="float-end">
<span class="icon-comments"></span> 9
</span>
</div>
</div>
</div>
</article>
<!-- post start -->
<article class="col-6 col-sm-4">
<div class="card card-full mb-4 hover-a">
<!--thumbnail-->
<div class="ratio_360-202 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img6.jpg" alt="Image description">
</a>
</div>
<div class="card-body">
<!--title-->
<h2 class="card-title h5">
<a href="#">Ferrari improves painting process so perfect</a>
</h2>
<!-- date & comments -->
<div class="card-text mb-2 text-muted small">
<time datetime="2019-10-22">Oct 22, 2019</time>
<span title="9 comment" class="float-end">
<span class="icon-comments"></span> 9
</span>
</div>
</div>
</div>
</article>
</div>
</div>
<!--end small post-->
</div>
</div>
<!--End Block-->
Block 16 with custom color
This block component is same like block content 16, just add block color in block-area classes
<!-- Block start -->
<div class="block-area block-danger">
....
....
</div>
<!--End Block-->