This is a wider card with supporting text below as a natural lead-in to additional content...
<!--Block start-->
<div class="block-area">
<!-- block title -->
<div class="block-title-6">
<h4 class="h5 border-primary">
<span class="bg-primary text-white">International</span>
</h4>
</div>
<!--big post start-->
<div class="big-post">
<article class="card card-full hover-a mb-4">
<div class="row">
<div class="col-lg-6">
<!-- 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/img8.jpg" alt="Image description">
</a>
</div>
</div>
<div class="col-lg-6">
<div class="card-body pt-3 pt-lg-0">
<!--title-->
<h2 class="card-title h1-sm h3-lg">
<a href="#">Leica D-Lux 7 compact camera with 17MP four-thirds sensor</a>
</h2>
<!-- author, date and 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">Oct 21, 2019</time>
<span title="5 comment" class="float-end">
<span class="icon-comments"></span> 5
</span>
</div>
<!--description-->
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content...</p>
</div>
</div>
</div>
</article>
</div>
<!--small post start-->
<div class="row small-post">
<!-- post list -->
<article class="col-lg-6">
<div class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img27.jpg" alt="Image description">
</a>
</div>
</div>
<!-- title & date -->
<div class="col-9 col-md-8">
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-lg">
<a href="#">The Bride Was a Dream in a Dirndl, but Putin Stole the Show</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-19">Oct 19, 2019</time>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- post list -->
<article class="col-lg-6">
<div class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img28.jpg" alt="Image description">
</a>
</div>
</div>
<div class="col-9 col-md-8">
<!-- title & date -->
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-lg">
<a href="#">Quebec’s ‘Trash Radio’ Host Fires Up Outrage, and Big Ratings</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-18">Oct 18, 2019</time>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- post list -->
<article class="col-lg-6">
<div class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img29.jpg" alt="Image description">
</a>
</div>
</div>
<!-- title & date -->
<div class="col-9 col-md-8">
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-lg">
<a href="#">The West Hoped for Democracy in Turkey. Erdogan Had Other Ideas</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-17">Oct 17, 2019</time>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- post list -->
<article class="col-lg-6">
<div class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img30.jpg" alt="Image description">
</a>
</div>
</div>
<!-- title & date -->
<div class="col-9 col-md-8">
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-lg">
<a href="#">Why Apple went to war with Facebook and Google this week</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-16">Oct 16, 2019</time>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- End post list -->
</div>
</div>
<!-- End block -->
This is a wider card with supporting text below as a natural lead-in to additional content...
This block component is same like block content 2, just add block color in block-area classes
<!-- Block start -->
<div class="block-area block-warning">
....
....
</div>
<!--End Block-->
This is a wider card with supporting text below as a natural lead-in to additional content...
<!--Block start-->
<div class="block-area">
<!-- block title -->
<div class="block-title-6">
<h4 class="h5 border-primary">
<span class="bg-primary text-white">International</span>
</h4>
</div>
<!--big post start-->
<div class="big-post">
<article class="card card-full hover-a mb-4">
<!-- 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/img8.jpg" alt="Image description">
</a>
</div>
<div class="card-body pt-3">
<!--title-->
<h2 class="card-title h1-sm h3-md">
<a href="#">Leica D-Lux 7 compact camera with 17MP four-thirds sensor</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-21">Oct 21, 2019</time>
<span title="5 comment" class="float-end">
<span class="icon-comments"></span> 5
</span>
</div>
<!--description-->
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content...</p>
</div>
</article>
</div>
<!--small post start-->
<div class="small-post">
<!-- post list -->
<article class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img27.jpg" alt="Image description">
</a>
</div>
</div>
<!-- title & date -->
<div class="col-9 col-md-8">
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-md">
<a href="#">The Bride Was a Dream in a Dirndl, but Putin Stole the Show</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-19">Oct 19, 2019</time>
</div>
</div>
</div>
</div>
</article>
<!-- post list -->
<article class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img28.jpg" alt="Image description">
</a>
</div>
</div>
<!-- title & date -->
<div class="col-9 col-md-8">
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-md">
<a href="#">Quebec’s ‘Trash Radio’ Host Fires Up Outrage, and Big Ratings</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-18">Oct 18, 2019</time>
</div>
</div>
</div>
</div>
</article>
<!-- post list -->
<article class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img29.jpg" alt="Image description">
</a>
</div>
</div>
<!-- title & date -->
<div class="col-9 col-md-8">
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-md">
<a href="#">The West Hoped for Democracy in Turkey. Erdogan Had Other Ideas</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-17">Oct 17, 2019</time>
</div>
</div>
</div>
</div>
</article>
<!-- End post list -->
</div>
</div>
<!-- End block -->