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 List News -->
                    <article class="d-block card border-0 mb-7">
                      <div class="card-body p-0">
                        <div class="row">
                          <div class="col-sm-5 mb-5 mb-sm-0">
                            <img class="img-fluid w-100 rounded" src="../../assets/img/480x320/img12.jpg" alt="Image Description">
                          </div>

                          <div class="col-sm-7">
                            <div class="pt-1 pr-4">
                              <small class="d-block text-muted mb-3">April 11, 2018</small>
                              <div class="mb-7">
                                <h2 class="h5">
                                  <a href="#">Smartbtc sees the need for contracts</a>
                                </h2>
                                <p>Just recently the startup Smartbtc announced the execution of...</p>
                              </div>
                              <small class="d-block text-secondary">by <a class="text-dark font-weight-semi-bold" href="#">James Austin</a></small>
                            </div>
                          </div>
                        </div>
                      </div>
                    </article>
                    <!-- End Blog News -->

                    <!-- Blog List News -->
                    <article class="d-block card border-0 mb-7">
                      <div class="card-body p-0">
                        <div class="row">
                          <div class="col-sm-5 mb-5 mb-sm-0">
                            <img class="img-fluid w-100 rounded" src="../../assets/img/480x320/img17.jpg" alt="Image Description">
                          </div>

                          <div class="col-sm-7">
                            <div class="pt-1 pr-4">
                              <small class="d-block text-muted mb-3">May 5, 2018</small>
                              <div class="mb-7">
                                <h3 class="h5">
                                  <a href="#">Italy completes consultations on companies</a>
                                </h3>
                                <p>Public consultations on a new regulatory regime for crypto companies...</p>
                              </div>
                              <small class="d-block text-secondary">by <a class="text-dark font-weight-semi-bold" href="#">James Austin</a></small>
                            </div>
                          </div>
                        </div>
                      </div>
                    </article>
                    <!-- End Blog News -->
                  
                

List #2

                  
                    <!-- Thumbnail News -->
                    <article class="card border-0 mb-5">
                      <div class="card-body p-0">
                        <div class="media">
                          <div class="u-avatar mr-3">
                            <img class="img-fluid rounded" src="../../assets/img/100x100/img5.jpg" alt="Image Description">
                          </div>
                          <div class="media-body">
                            <h4 class="h6 font-weight-normal mb-0">
                              <a href="#">
                                Homemade Clabatta donuts
                              </a>
                            </h4>
                          </div>
                        </div>
                      </div>
                    </article>
                    <!-- End Thumbnail News -->

                    <!-- Thumbnail News -->
                    <article class="card border-0 mb-5">
                      <div class="card-body p-0">
                        <div class="media">
                          <div class="u-avatar mr-3">
                            <img class="img-fluid rounded" src="../../assets/img/100x100/img7.jpg" alt="Image Description">
                          </div>
                          <div class="media-body">
                            <h4 class="h6 font-weight-normal mb-0">
                              <a href="#">
                                Spruce up your coffee table
                              </a>
                            </h4>
                          </div>
                        </div>
                      </div>
                    </article>
                    <!-- End Thumbnail News -->

                    <!-- Thumbnail News -->
                    <article class="card border-0 mb-5">
                      <div class="card-body p-0">
                        <div class="media">
                          <div class="u-avatar mr-3">
                            <img class="img-fluid rounded" src="../../assets/img/100x100/img6.jpg" alt="Image Description">
                          </div>
                          <div class="media-body">
                            <h4 class="h6 font-weight-normal mb-0">
                              <a href="#">
                                Breating in the crisp air of cozy place
                              </a>
                            </h4>
                          </div>
                        </div>
                      </div>
                    </article>
                    <!-- End Thumbnail News -->
                  
                

List #3

                  
                    <!-- 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>