News Blog - List
To help you reach your audience in a personal and more informal way, Front includes several News Blogs to start with.
List #1
<!-- Blog Card -->
<article>
<div class="row justify-content-between">
<div class="col-6">
<a class="d-inline-block text-muted font-weight-medium text-uppercase small" href="#">Product</a>
<h4 class="h6 font-weight-medium mb-0">
<a href="single-article.html">InVision design forward fund</a>
</h4>
</div>
<div class="col-5">
<img class="img-fluid" src="../../assets/img/500x280/img18.jpg" alt="Image Description">
</div>
</div>
</article>
<!-- End Blog Card -->
<!-- Blog Card -->
<article class="border-top pt-5 mt-5">
<div class="row justify-content-between">
<div class="col-6">
<a class="d-inline-block text-muted font-weight-medium text-uppercase small" href="#">Business</a>
<h4 class="h6 font-weight-medium mb-0">
<a href="single-article.html">What CFR really is about</a>
</h4>
</div>
<div class="col-5">
<img class="img-fluid" src="../../assets/img/500x280/img13.jpg" alt="Image Description">
</div>
</div>
</article>
<!-- End Blog Card -->
<!-- Blog Card -->
<article class="border-top pt-5 mt-5">
<div class="row justify-content-between">
<div class="col-6">
<a class="d-inline-block text-muted font-weight-medium text-uppercase small" href="#">Business</a>
<h4 class="h6 font-weight-medium mb-0">
<a href="single-article.html">Enjoy $1,000 worth of perks with Front for Business</a>
</h4>
</div>
<div class="col-5">
<img class="img-fluid" src="../../assets/img/500x280/img19.jpg" alt="Image Description">
</div>
</div>
</article>
<!-- End Blog Card -->
List #2
<!-- News Carousel -->
<div class="bg-primary">
<div class="container space-1">
<div class="js-slick-carousel u-slick u-slick--gutters-3"
data-slides-show="3"
data-slides-scroll="1"
data-autoplay="true"
data-speed="5000"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide">
<!-- News -->
<div class="u-blog-thumb-minimal">
<a class="media" href="#">
<span class="d-flex u-blog-thumb-minimal__img-wrapper mr-3">
<span class="u-blog-thumb-minimal__img-wrapper">
<img class="img-fluid u-blog-thumb-minimal__img" src="../../assets/img/380x360/img23.jpg" alt="Image Description">
</span>
</span>
<span class="media-body">
<span class="d-block h6 text-white mb-1">Interior photographs</span>
<small class="d-block text-white-70">It doesn't talk about the usual photography attractions.</small>
</span>
</a>
</div>
<!-- End News -->
</div>
<div class="js-slide">
<!-- News -->
<div class="u-blog-thumb-minimal">
<a class="media" href="#">
<span class="d-flex u-blog-thumb-minimal__img-wrapper mr-3">
<span class="u-blog-thumb-minimal__img-wrapper">
<img class="img-fluid u-blog-thumb-minimal__img" src="../../assets/img/380x360/img9.jpg" alt="Image Description">
</span>
</span>
<span class="media-body">
<span class="d-block h6 text-white mb-1">My portfolio update</span>
<small class="d-block text-white-70">Portfolio offers a user a new way of experiencing design.</small>
</span>
</a>
</div>
<!-- End News -->
</div>
<div class="js-slide">
<!-- News -->
<div class="u-blog-thumb-minimal">
<a class="media" href="#">
<span class="d-flex u-blog-thumb-minimal__img-wrapper mr-3">
<span class="u-blog-thumb-minimal__img-wrapper">
<img class="img-fluid u-blog-thumb-minimal__img" src="../../assets/img/380x360/img8.jpg" alt="Image Description">
</span>
</span>
<span class="media-body">
<span class="d-block h6 text-white mb-1">The guide to Italian living</span>
<small class="d-block text-white-70">Learn how to live Italian and become happier</small>
</span>
</a>
</div>
<!-- End News -->
</div>
<div class="js-slide">
<!-- News -->
<div class="u-blog-thumb-minimal">
<a class="media" href="#">
<span class="d-flex u-blog-thumb-minimal__img-wrapper mr-3">
<span class="u-blog-thumb-minimal__img-wrapper">
<img class="img-fluid u-blog-thumb-minimal__img" src="../../assets/img/380x360/img10.jpg" alt="Image Description">
</span>
</span>
<span class="media-body">
<span class="d-block h6 text-white mb-0">19 design fails that prove fonts and spacing are everything</span>
</span>
</a>
</div>
<!-- End News -->
</div>
<div class="js-slide">
<!-- News -->
<div class="u-blog-thumb-minimal">
<a class="media" href="#">
<span class="d-flex u-blog-thumb-minimal__img-wrapper mr-3">
<span class="u-blog-thumb-minimal__img-wrapper">
<img class="img-fluid u-blog-thumb-minimal__img" src="../../assets/img/380x360/img11.jpg" alt="Image Description">
</span>
</span>
<span class="media-body">
<span class="d-block h6 text-white mb-1">Warm spring is coming！</span>
<small class="d-block text-white-70">Australian trees 'sweat' to survive extreme heatwaves</small>
</span>
</a>
</div>
<!-- End News -->
</div>
</div>
</div>
</div>
<!-- End News Carousel -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>