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 is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
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 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">Travel</span>
</h4>
</div>
<div class="row">
<!--post start-->
<article class="col-sm-6">
<div class="card card-full hover-a mb-module">
<!--thumbnail & category-->
<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/img13.jpg" alt="Image description">
</a>
<a class="position-absolute m-2 b-0 p-1 badge badge-primary" href="#">Holiday</a>
</div>
<div class="card-body">
<!--title-->
<h3 class="card-title h2 h3-sm h4-md h3-lg">
<a href="#">Fans celebrate in Paris after side reaches World Cup final</a>
</h3>
<!-- 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>
<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>
</div>
</article>
<!--post start-->
<article class="col-sm-6">
<div class="card card-full hover-a mb-module">
<!--thumbnail & category-->
<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/img14.jpg" alt="Image description">
</a>
<a class="position-absolute m-2 b-0 p-1 badge badge-primary" href="#">Hotels</a>
</div>
<div class="card-body">
<!--title.-->
<h3 class="card-title h2 h3-sm h4-md h3-lg">
<a href="#">5 Tips to Save Money Booking Your Next Hotel Room</a>
</h3>
<!-- 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>
<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>
</div>
</article>
<!--post start-->
<article class="col-sm-6">
<div class="card card-full hover-a mb-module">
<!--thumbnail & category-->
<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/img15.jpg" alt="Image description">
</a>
<a class="position-absolute m-2 b-0 p-1 badge badge-primary" href="#">Destination</a>
</div>
<div class="card-body">
<!--title-->
<h3 class="card-title h2 h3-sm h4-md h3-lg">
<a href="#">The 52 Places Traveler: Summer in France, in Two Very Different Ways</a>
</h3>
<!-- 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>
<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>
</div>
</article>
<!--post start-->
<article class="col-sm-6">
<div class="card card-full hover-a mb-module">
<!--thumbnail & category-->
<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/img16.jpg" alt="Image description">
</a>
<a class="position-absolute m-2 b-0 p-1 badge badge-primary" href="#">Food</a>
</div>
<div class="card-body">
<!--title-->
<h3 class="card-title h2 h3-sm h4-md h3-lg">
<a href="#">6 Simple Tips to Help Vegetarian or Vegan Travelers Eat Well, Anywhere</a>
</h3>
<!-- 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>
<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>
</div>
</article>
</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 is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
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 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 6, just add block color in block-area classes
<!-- Block start -->
<div class="block-area block-success">
....
....
</div>
<!--End Block-->
<!-- block start -->
<aside class="widget">
<div class="block-title-6">
<h4 class="h5 border-primary">
<span class="bg-primary text-white">Travel</span>
</h4>
</div>
<div class="row">
<!--post start-->
<article class="col-sm-6 col-md-12">
<div class="card card-full hover-a mb-module">
<!--thumbnail & category-->
<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/img13.jpg" alt="Image description">
</a>
<a class="position-absolute m-2 b-0 p-1 badge badge-primary" href="#">Holiday</a>
</div>
<div class="card-body">
<!--title-->
<h3 class="card-title h2 h3-sm h4-md h3-lg">
<a href="#">Fans celebrate in Paris after side reaches World Cup final</a>
</h3>
<!-- 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>
<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>
</div>
</article>
<!--post start-->
<article class="col-sm-6 col-md-12">
<div class="card card-full hover-a mb-module">
<!--thumbnail & category-->
<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/img14.jpg" alt="Image description">
</a>
<a class="position-absolute m-2 b-0 p-1 badge badge-primary" href="#">Hotels</a>
</div>
<div class="card-body">
<!--title.-->
<h3 class="card-title h2 h3-sm h4-md h3-lg">
<a href="#">5 Tips to Save Money Booking Your Next Hotel Room</a>
</h3>
<!-- 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>
<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>
</div>
</article>
</div>
</aside>
<!-- end block -->