Block 5 - on 2 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">Fashion</span>
</h4>
</div>
<!-- block-content -->
<div class="row">
<!--post start-->
<article class="col-6 col-lg-4">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_230-129 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/230x129/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-21">October 21, 2018</time>
<span title="5 comment" class="float-end">
<span class="icon-comments"></span> 5
</span>
</div>
<!--title-->
<h2 class="card-title h5 h4-sm h6-md h5-lg"><a href="#">Why the world would end without political polls</a></h2>
</div>
</div>
</article>
<!--post start-->
<article class="col-6 col-lg-4">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_230-129 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/230x129/img2.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-21">October 21, 2018</time>
<span title="5 comment" class="float-end">
<span class="icon-comments"></span> 5
</span>
</div>
<!--title-->
<h2 class="card-title h5 h4-sm h6-md h5-lg"><a href="#">European markets fight back to close higher; oil in focus</a></h2>
</div>
</div>
</article>
<!--post start-->
<article class="col-6 col-lg-4">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_230-129 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/230x129/img3.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-21">October 21, 2018</time>
<span title="5 comment" class="float-end">
<span class="icon-comments"></span> 5
</span>
</div>
<!--title-->
<h2 class="card-title h5 h4-sm h6-md h5-lg"><a href="#">Want the best Black Friday deals? Head to a store</a></h2>
</div>
</div>
</article>
<!--post start-->
<article class="col-6 col-lg-4">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_230-129 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/230x129/img4.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-21">October 21, 2018</time>
<span title="5 comment" class="float-end">
<span class="icon-comments"></span> 5
</span>
</div>
<!--title-->
<h2 class="card-title h5 h4-sm h6-md h5-lg"><a href="#">Nascar’s Future Depends on These 5-Year-Olds</a></h2>
</div>
</div>
</article>
<!--post start-->
<article class="col-6 col-lg-4">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_230-129 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/230x129/img5.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-21">October 21, 2018</time>
<span title="5 comment" class="float-end">
<span class="icon-comments"></span> 5
</span>
</div>
<!--title-->
<h2 class="card-title h5 h4-sm h6-md h5-lg"><a href="#">Street Style: Governors Ball Music Festival</a></h2>
</div>
</div>
</article>
<!--post start-->
<article class="col-6 col-lg-4">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_230-129 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/230x129/img6.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-21">October 21, 2018</time>
<span title="5 comment" class="float-end">
<span class="icon-comments"></span> 5
</span>
</div>
<!--title-->
<h2 class="card-title h5 h4-sm h6-md h5-lg"><a href="#">Beyond Porridge and Boiled Mutton: A Taste of London</a></h2>
</div>
</div>
</article>
</div>
<!-- end block content -->
</div>
<!--End Block-->
Block 5 with custom color
This block component is same like block content 5, just add block color in block-area classes
<!-- Block start -->
<div class="block-area block-warning">
....
....
</div>
<!--End Block-->
<!--Block start-->
<div class="block-area">
<!--block title-->
<div class="block-title-6">
<h4 class="h5 border-primary">
<span class="bg-primary text-white">Fashion</span>
</h4>
</div>
<!-- block-content -->
<div class="row">
<!--post start-->
<article class="col-6 col-md-12 col-lg-6">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_230-129 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/230x129/img1.jpg" alt="Image description">
</a>
</div>
<div class="card-body">
<!-- date & comments -->
<div class="card-text mb-2 text-muted small">
<time datetime="2019-10-21">October 21, 2018</time>
<span title="5 comment" class="float-end">
<span class="icon-comments"></span> 5
</span>
</div>
<!--title-->
<h2 class="card-title h5 h4-sm h5-md h6-lg"><a href="#">Why the world would end without political polls</a></h2>
</div>
</div>
</article>
<!--post start-->
<article class="col-6 col-md-12 col-lg-6">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_230-129 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/230x129/img2.jpg" alt="Image description">
</a>
</div>
<div class="card-body">
<!-- date & comments -->
<div class="card-text mb-2 text-muted small">
<time datetime="2019-10-21">October 21, 2018</time>
<span title="5 comment" class="float-end">
<span class="icon-comments"></span> 5
</span>
</div>
<!--title-->
<h2 class="card-title h5 h4-sm h5-md h6-lg"><a href="#">European markets fight back to close higher; oil in focus</a></h2>
</div>
</div>
</article>
<!--post start-->
<article class="col-6 col-md-12 col-lg-6">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_230-129 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/230x129/img3.jpg" alt="Image description">
</a>
</div>
<div class="card-body">
<!-- date & comments -->
<div class="card-text mb-2 text-muted small">
<time datetime="2019-10-21">October 21, 2018</time>
<span title="5 comment" class="float-end">
<span class="icon-comments"></span> 5
</span>
</div>
<!--title-->
<h2 class="card-title h5 h4-sm h5-md h6-lg"><a href="#">Want the best Black Friday deals? Head to a store</a></h2>
</div>
</div>
</article>
<!--post start-->
<article class="col-6 col-md-12 col-lg-6">
<div class="card card-full hover-a mb-4">
<!--thumbnail-->
<div class="ratio_230-129 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/230x129/img4.jpg" alt="Image description">
</a>
</div>
<div class="card-body">
<!-- date & comments -->
<div class="card-text mb-2 text-muted small">
<time datetime="2019-10-21">October 21, 2018</time>
<span title="5 comment" class="float-end">
<span class="icon-comments"></span> 5
</span>
</div>
<!--title-->
<h2 class="card-title h5 h4-sm h5-md h6-lg"><a href="#">Nascar’s Future Depends on These 5-Year-Olds</a></h2>
</div>
</div>
</article>
</div>
<!-- end block content -->
</div>
<!--End Block-->