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>