News Blogs

To help you reach your audience in a personal and more informal way, Front includes several News Blogs to start with.

News blog #1

News

Read our blogs to follow the latest news

Read Now
Features

Start exploring the docs and starters

Read Now
              
                <!-- Blog Card Section -->
                <div class="container">
                  <div class="w-lg-65 mx-lg-auto">
                    <div class="card-deck d-block d-md-flex card-md-gutters-3">
                      <!-- Blog Card -->
                      <article class="card border-0 bg-primary text-white shadow-primary-lg transition-3d-hover mb-5 mb-md-0">
                        <div class="card-body p-6">
                          <span class="btn btn-lg btn-icon btn-soft-light rounded-circle mb-9">
                            <span class="fab fa-audible font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
                          </span>
                          <small class="d-block text-white-70 text-uppercase mb-1">News</small>
                          <h3 class="h5 mb-3">Read our blogs to follow the latest news</h3>
                          <a class="btn btn-sm btn-soft-white btn-pill transition-3d-hover" href="#">Read Now</a>
                        </div>
                      </article>
                      <!-- End Blog Card -->

                      <!-- Blog Card -->
                      <article class="card border-0 shadow-sm transition-3d-hover">
                        <div class="card-body p-6">
                          <span class="btn btn-lg btn-icon btn-soft-primary rounded-circle mb-9">
                            <span class="far fa-file-archive font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
                          </span>
                          <small class="d-block text-primary text-uppercase mb-1">Features</small>
                          <h3 class="h5 mb-3">Start exploring the docs and starters</h3>
                          <a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="#">Read Now</a>
                        </div>
                      </article>
                      <!-- End Blog Card -->
                    </div>
                  </div>
                </div>
                <!-- End Blog Card Section -->
              
            

News blog #2

              
                <div class="card-deck card-sm-gutters-2 d-block d-sm-flex">
                  <!-- News Blog -->
                  <a class="card card-text-dark border-0 shadow-sm transition-3d-hover mb-5" href="#">
                    <img class="card-img-top" src="../../assets/img/380x270/img2.jpg" alt="Image Description">
                    <div class="card-body p-4">
                      <h2 class="h6 mb-0">Atlassian</h2>
                      <small class="d-block text-secondary">Website design</small>
                    </div>
                  </a>
                  <!-- End News Blog -->

                  <!-- News Blog -->
                  <a class="card card-text-dark border-0 shadow-sm transition-3d-hover mb-5" href="#">
                    <img class="card-img-top" src="../../assets/img/380x270/img12.jpg" alt="Image Description">
                    <div class="card-body p-4">
                      <h2 class="h6 mb-0">Asana</h2>
                      <small class="d-block text-secondary">Other</small>
                    </div>
                  </a>
                  <!-- End News Blog -->

                  <!-- News Blog -->
                  <a class="card card-text-dark border-0 shadow-sm transition-3d-hover mb-5" href="#">
                    <img class="card-img-top" src="../../assets/img/380x270/img4.jpg" alt="Image Description">
                    <div class="card-body p-4">
                      <h2 class="h6 mb-0">Slack</h2>
                      <small class="d-block text-secondary">Blog</small>
                    </div>
                  </a>
                  <!-- End News Blog -->
                </div>
              
            

Classic news blog #1

Image Description
April 29, 2018

5 basic tips for colors

Tis the season to be jolly, and Ueno has one more thing to be cheery about in 2017.

              
                <div class="card-deck d-block d-sm-flex card-sm-gutters-3 mb-sm-7">
                  <!-- News Classic -->
                  <article class="card border-0">
                    <div class="card-body p-0">
                      <div class="mb-5">
                        <img class="img-fluid rounded" src="../../assets/img/500x280/img12.jpg" alt="Image Description">
                      </div>
                      <small class="d-block text-secondary mb-1">March 20, 2018</small>
                      <h2 class="h5">
                        <a href="#">Remote workers, here's how to dodge distractions</a>
                      </h2>
                      <p>We've been working hard with our besties at Reuters to design a new reading experience for Reuters.com.</p>
                    </div>
                  </article>
                  <!-- End News Classic -->

                  <!-- News Classic -->
                  <article class="card border-0">
                    <div class="card-body p-0">
                      <div class="mb-5">
                        <img class="img-fluid rounded" src="../../assets/img/500x280/img23.jpg" alt="Image Description">
                      </div>
                      <small class="d-block text-secondary mb-1">April 29, 2018</small>
                      <h3 class="h5">
                        <a href="#">5 basic tips for colors</a>
                      </h3>
                      <p>Tis the season to be jolly, and Ueno has one more thing to be cheery about in 2017.</p>
                    </div>
                  </article>
                  <!-- End News Classic -->
                </div>
              
            

Grid news blog #1

              
                <div class="card-deck d-block d-md-flex card-md-gutters-2">
                  <!-- Blog Grid -->
                  <article class="card border-0 shadow-sm mb-3">
                    <div class="card-body p-5">
                      <small class="d-block text-muted mb-2">May 15, 2018</small>
                      <h2 class="h5">
                        <a href="#">InVision design forward fund</a>
                      </h2>
                      <p class="mb-0">Clark Valberg is the founder and CEO of InVision.</p>
                    </div>

                    <div class="card-footer pb-5 px-0 mx-5">
                      <div class="media align-items-center">
                        <div class="u-sm-avatar mr-3">
                          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                        </div>
                        <div class="media-body">
                          <h4 class="small mb-0"><a href="#">Andrea Gard</a></h4>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Blog Grid -->

                  <!-- Blog Grid -->
                  <article class="card border-0 shadow-sm mb-3">
                    <div class="card-body p-5">
                      <small class="d-block text-muted mb-2">May 22, 2018</small>
                      <h3 class="h5">
                        <a href="#">Announcing a plan for small teams</a>
                      </h3>
                      <p class="mb-0">We've always believed that by providing a space</p>
                    </div>

                    <div class="card-footer pb-5 px-0 mx-5">
                      <div class="media align-items-center">
                        <div class="u-sm-avatar mr-3">
                          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
                        </div>
                        <div class="media-body">
                          <h4 class="small mb-0"><a href="#">James Austin</a></h4>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Blog Grid -->

                  <!-- Blog Grid -->
                  <article class="card border-0 shadow-sm mb-3">
                    <div class="card-body p-5">
                      <small class="d-block text-muted mb-2">May 30, 2018</small>
                      <h3 class="h5">
                        <a href="#">Design principles</a>
                      </h3>
                      <p class="mb-0">The biggest collections of design principles on the internet</p>
                    </div>

                    <div class="card-footer pb-5 px-0 mx-5">
                      <div class="media align-items-center">
                        <div class="u-sm-avatar mr-3">
                          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
                        </div>
                        <div class="media-body">
                          <h4 class="small mb-0"><a href="#">Charlotte Moore</a></h4>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Blog Grid -->
                </div>
              
            

List news blog #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 -->
              
            

Modern news blog #1

              
                <div class="row mx-gutters-2">
                  <div class="col-md-7 mb-3">
                    <!-- Blog News -->
                    <a class="d-flex align-items-end bg-img-hero gradient-overlay-half-dark-v1 transition-3d-hover height-450 rounded-pseudo" href="#" style="background-image: url(../../assets/img/400x500/img8.jpg);">
                      <article class="w-100 text-center p-6">
                        <h2 class="h4 text-white">Front & envelope</h2>
                        <div class="mt-4">
                          <strong class="d-block text-white-70 mb-2">Neyton Burchie</strong>
                          <div class="u-avatar mx-auto">
                            <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
                          </div>
                        </div>
                      </article>
                    </a>
                    <!-- End Blog News -->
                  </div>

                  <div class="col-md-5 mb-3">
                    <!-- Blog News -->
                    <a class="d-flex align-items-end bg-img-hero gradient-overlay-half-dark-v1 transition-3d-hover height-450 rounded-pseudo" href="#" style="background-image: url(../../assets/img/400x500/img9.jpg);">
                      <article class="w-100 text-center p-6">
                        <h3 class="h4 text-white">Gimme that Awwward!</h3>
                        <div class="mt-4">
                          <strong class="d-block text-white-70 mb-2">Tina Krueger</strong>
                          <div class="u-avatar mx-auto">
                            <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                          </div>
                        </div>
                      </article>
                    </a>
                    <!-- End Blog News -->
                  </div>
                </div>
              
            

Card news blog #1

              
                <div class="row">
                  <div class="col-md-6 mb-3 mb-md-0">
                    <!-- Blog Card -->
                    <article class="card d-block border-0 transition-3d-hover mt-1">
                      <div class="card-body p-5">
                        <!-- Header -->
                        <header class="d-flex justify-content-between align-items-center mb-4">
                          <a class="btn btn-xs btn-icon btn-soft-danger rounded-circle" href="javascript:;">
                            <span class="fas fa-arrow-down btn-icon__inner"></span>
                          </a>
                          <small class="text-muted">3 hours ago</small>
                        </header>
                        <!-- End Header -->

                        <!-- Info -->
                        <div class="mb-4">
                          <img class="img-fluid rounded" src="../../assets/img/500x280/img1.jpg" alt="Image Description">
                        </div>
                        <h2 class="h5">
                          <a href="#">Rocky Mountains</a>
                        </h2>
                        <p class="mb-0">New snowfall throughout the season is displayed with 24 hour and 72-hour snow totals, providing a snapshot of mountain conditions.</p>
                        <!-- End Info -->
                      </div>

                      <!-- Footer -->
                      <footer class="card-footer p-5">
                        <div class="media align-items-center">
                          <a class="u-sm-avatar position-relative mr-3" href="#">
                            <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                            <span class="badge badge-md badge-outline-primary badge-pos badge-pos--bottom-right rounded-circle">+</span>
                          </a>
                          <div class="media-body">
                            <h3 class="h6 mb-0">
                              <a href="#">Andrea Gard</a>
                            </h3>
                            <small class="d-block">on <a class="text-secondary" href="#">Buzzfeed</a></small>
                          </div>
                        </div>
                      </footer>
                      <!-- End Footer -->
                    </article>
                    <!-- End Blog Card -->
                  </div>

                  <div class="col-md-6">
                    <!-- Blog Card -->
                    <article class="card d-block border-0 transition-3d-hover mt-1">
                      <div class="card-body p-5">
                        <!-- Header -->
                        <header class="d-flex justify-content-between align-items-center mb-4">
                          <a class="btn btn-xs btn-icon btn-soft-success rounded-circle" href="javascript:;">
                            <span class="fas fa-arrow-up btn-icon__inner"></span>
                          </a>
                          <small class="d-block text-muted">19 hours ago</small>
                        </header>
                        <!-- End Header -->

                        <!-- Info -->
                        <div class="mb-4">
                          <img class="img-fluid rounded" src="../../assets/img/500x280/img11.jpg" alt="Image Description">
                        </div>
                        <h2 class="h5">
                          <a href="#">Announcing a free plan for small teams</a>
                        </h2>
                        <p class="mb-0">At Wake, our mission has always been focused on bringing openness.</p>
                        <!-- End Info -->
                      </div>

                      <!-- Footer -->
                      <footer class="card-footer p-5">
                        <div class="media align-items-center">
                          <a class="u-sm-avatar position-relative mr-3" href="#">
                            <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
                            <span class="badge badge-md badge-outline-primary badge-pos badge-pos--bottom-right rounded-circle">+</span>
                          </a>
                          <div class="media-body">
                            <h3 class="h6 mb-0">
                              <a href="#">James Austin</a>
                            </h3>
                            <small class="d-block">on <a class="text-secondary" href="#">InVision</a></small>
                          </div>
                        </div>
                      </footer>
                      <!-- End Footer -->
                    </article>
                    <!-- End Blog Card -->
                  </div>
                </div>
              
            

Card news blog #2

              
                <div class="row">
                <div class="col-md-6 mb-3 mb-md-0">
                  <!-- Blog Card -->
                  <article class="d-flex align-items-start flex-wrap height-380 gradient-overlay-half-dark-v2 bg-img-hero rounded-pseudo transition-3d-hover p-5 mt-1" style="background-image: url(../../assets/img/500x550/img2.jpg);">
                    <header class="w-100 d-flex justify-content-between mb-3">
                      <!-- Author -->
                      <div class="media align-items-center">
                        <a class="u-sm-avatar position-relative mr-3" href="#">
                          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
                          <span class="badge badge-primary badge-pos badge-pos--bottom-right rounded-circle">+</span>
                        </a>
                        <div class="media-body">
                          <h3 class="h6 text-white mb-0">
                            <a href="#">Scott Levine</a>
                          </h3>
                          <small class="d-block text-white">on <a class="text-white-70" href="#">Buzzfeed</a></small>
                        </div>
                      </div>
                      <!-- End Author -->

                      <small class="d-block text-white-70">1 day ago</small>
                    </header>

                    <!-- Info -->
                    <div class="mt-auto">
                      <h2 class="h5 text-white">
                        <a href="#">Facebook is creating a news section in Watch to feature breaking news</a>
                      </h2>
                      <p class="text-white-70 mb-0">Facebook launched the Watch platform in August</p>
                    </div>
                    <!-- End Info -->
                  </article>
                  <!-- End Blog Card -->
                </div>

                <div class="col-md-6">
                  <!-- Blog Card -->
                  <article class="d-flex align-items-start flex-wrap height-380 gradient-overlay-half-dark-v2 bg-img-hero rounded-pseudo transition-3d-hover p-5 mt-1" style="background-image: url(../../assets/img/500x550/img3.jpg);">
                    <header class="w-100 d-flex justify-content-between mb-3">
                      <!-- Author -->
                      <div class="media align-items-center">
                        <a class="u-sm-avatar position-relative mr-3" href="#">
                          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                          <span class="badge badge-primary badge-pos badge-pos--bottom-right rounded-circle">+</span>
                        </a>
                        <div class="media-body">
                          <h3 class="h6 text-white mb-0">
                            <a href="#">Andrea Gard</a>
                          </h3>
                          <small class="d-block text-white">on <a class="text-white-70" href="#">Buzzfeed</a></small>
                        </div>
                      </div>
                      <!-- End Author -->

                      <small class="d-block text-white-70">29 days ago</small>
                    </header>

                    <!-- Info -->
                    <div class="mt-auto">
                      <h2 class="h5 text-white">
                        <a href="#">A last-minute Labor Day road trip</a>
                      </h2>
                      <p class="text-white-70 mb-0">Time is running out on all those ambitious plans for barbecues, lounging at the beach and road trips.</p>
                    </div>
                    <!-- End Info -->
                  </article>
                  <!-- End Blog Card -->
                </div>
              </div>
              
            

Card news blog #3

              
                <div class="row">
                <div class="col-md-6 mb-3 mb-md-0">
                  <!-- Blog Card -->
                  <article class="card bg-primary text-center position-relative transition-3d-hover mt-1">
                    <a class="card-body py-9 px-7" href="#">
                      <!-- SVG Quote -->
                      <figure class="mx-auto mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
                           viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                          <path class="fill-white" opacity=".7" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                            C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                            c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                            C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                        </svg>
                      </figure>
                      <!-- End SVG Quote -->

                      <h3 class="h4 text-white mb-4">In the future, design principles won't be about design</h3>
                      <small class="d-block text-white-70">Andrea Gard</small>
                    </a>
                  </article>
                  <!-- End Blog Card -->
                </div>

                <div class="col-md-6">
                  <!-- Blog Card -->
                  <article class="card bg-danger text-center position-relative transition-3d-hover mt-1">
                    <a class="card-body py-9 px-7" href="#">
                      <!-- SVG Quote -->
                      <figure class="mx-auto mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
                           viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                          <path class="fill-white" opacity=".7" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                            C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                            c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                            C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                        </svg>
                      </figure>
                      <!-- End SVG Quote -->

                      <h3 class="h4 text-white mb-4">Front makes you look at things from a different perspectives.</h3>
                      <small class="d-block text-white-70">Scott Levine</small>
                    </a>
                  </article>
                  <!-- End Blog Card -->
                </div>
              </div>
              
            

Card news #4

Image Description
Logo

Amazon launched their enterprise platform and built a powerful user experience.

Image Description
Logo

Mapbox empowers marketers to create digital marketing dashboards easily and share them with their team.

Image Description
Logo

Netflix's mission is to create a planet run by the sun. In order to achieve this goal, they needed to find a way to make solar simple.

              
                <div class="row">
                  <div class="col-sm-6 col-md-4 mb-5">
                    <!-- Card Info -->
                    <div class="card border-0 shadow-soft h-100">
                      <img class="card-img-top" src="../../assets/img/480x320/img35.jpg" alt="Image Description">
                      <div class="card-body p-5">
                        <div class="max-width-15 w-100 mb-3">
                          <img class="img-fluid" src="../../assets/svg/clients-logo/amazon-original.svg" alt="Logo">
                        </div>
                        <p class="mb-0">Amazon launched their enterprise platform and built a powerful user experience.</p>
                      </div>
                      <div class="card-footer bg-light border-0 py-4 px-5">
                        <a href="customer-story.html">Read Story <small class="fas fa-arrow-right ml-1"></small></a>
                      </div>
                    </div>
                    <!-- End Card Info -->
                  </div>

                  <div class="col-sm-6 col-md-4 mb-5">
                    <!-- Card Info -->
                    <div class="card border-0 shadow-soft h-100">
                      <img class="card-img-top" src="../../assets/img/480x320/img31.jpg" alt="Image Description">
                      <div class="card-body p-5">
                        <div class="max-width-15 w-100 mb-3">
                          <img class="img-fluid" src="../../assets/svg/clients-logo/mapbox-original.svg" alt="Logo">
                        </div>
                        <p class="mb-0">Mapbox empowers marketers to create digital marketing dashboards easily and share them with their team.</p>
                      </div>
                      <div class="card-footer bg-light border-0 py-4 px-5">
                        <a href="customer-story.html">Read Story <small class="fas fa-arrow-right ml-1"></small></a>
                      </div>
                    </div>
                    <!-- End Card Info -->
                  </div>

                  <div class="col-sm-6 col-md-4 mb-5">
                    <!-- Card Info -->
                    <div class="card border-0 shadow-soft h-100">
                      <img class="card-img-top" src="../../assets/img/480x320/img32.jpg" alt="Image Description">
                      <div class="card-body p-5">
                        <div class="max-width-15 w-100 mb-3">
                          <img class="img-fluid" src="../../assets/svg/clients-logo/netflix-original.svg" alt="Logo">
                        </div>
                        <p class="mb-0">Netflix's mission is to create a planet run by the sun. In order to achieve this goal, they needed to find a way to make solar simple.</p>
                      </div>
                      <div class="card-footer bg-light border-0 py-4 px-5">
                        <a href="customer-story.html">Read Story <small class="fas fa-arrow-right ml-1"></small></a>
                      </div>
                    </div>
                    <!-- End Card Info -->
                  </div>
                </div>
              
            

Start-up news blog #1

              
                <div class="row">
                  <div class="col-md-6 mb-3 mb-md-0">
                    <!-- Article -->
                    <article>
                      <img class="img-fluid rounded" src="../../assets/img/900x450/img3.jpg" alt="Image Description">

                      <div class="px-4">
                        <ul class="list-inline d-flex align-items-center py-3">
                          <li class="list-inline-item d-flex align-items-center pr-2">
                            <div class="u-sm-avatar mr-2">
                              <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                            </div>
                            <a class="text-secondary font-size-1" href="#">Andrea Gard</a>
                          </li>
                          <li class="list-inline-item ml-auto">
                            <a class="d-flex align-items-center small text-secondary" href="javascript:;">
                              <span class="far fa-heart mr-2"></span>
                              3 Likes
                            </a>
                          </li>
                        </ul>

                        <!-- Info -->
                        <small class="d-block text-muted mb-1">5 minutes ago</small>
                        <h2 class="h4">
                          <a href="#">Exclusive interview with InVision's CEO</a>
                        </h2>
                        <p class="mb-0">Clark Valberg is the founder and CEO of InVision. If you are a designer, you have probably gotten an email from Clark or from InVision at one time or another, but if you're not familiar with the company.</p>
                        <!-- End Info -->
                      </div>
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="col-md-6">
                    <!-- Article -->
                    <article>
                      <img class="img-fluid rounded" src="../../assets/img/900x450/img4.jpg" alt="Image Description">

                      <div class="px-4">
                        <ul class="list-inline d-flex align-items-center py-3">
                          <li class="list-inline-item d-flex align-items-center pr-2">
                            <div class="u-sm-avatar mr-2">
                              <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
                            </div>
                            <a class="text-secondary font-size-1" href="#">Charlotte Moore</a>
                          </li>
                          <li class="list-inline-item ml-auto">
                            <a class="d-flex align-items-center small text-secondary" href="javascript:;">
                              <span class="far fa-heart mr-2"></span>
                              56 Likes
                            </a>
                          </li>
                        </ul>

                        <!-- Info -->
                        <small class="d-block text-muted mb-1">12 hours ago</small>
                        <h2 class="h4">
                          <a href="#">Have you ever wondered how to change careers or start a home-based business?</a>
                        </h2>
                        <p class="mb-0">Coffee News® is one of Forbes and Entrepreneur's highest-ranked affordable franchises. It entertains and informs readers, promotes local business and allows people just like you to make money working from home.</p>
                        <!-- End Info -->
                      </div>
                    </article>
                    <!-- End Article -->
                  </div>
                </div>
              
            

Masonry news blog #1

              
                <div class="card-sm-columns card-sm-2-count card-lg-3-count">
                  <!-- Blog Masonry -->
                  <article class="card border-0 mb-3">
                    <img class="img-fluid rounded" src="../../assets/img/380x250/img6.jpg" alt="Image Description">
                    <div class="card-body p-5">
                      <small class="d-block text-secondary mb-1">April 29, 2018</small>
                      <h3 class="h6 mb-0">
                        <a href="#">5 basic tips for colors</a>
                      </h3>
                    </div>
                  </article>
                  <!-- End Blog Masonry -->

                  <!-- Masonry -->
                  <article class="card bg-primary text-white border-0 mb-3">
                    <div class="card-body p-5">
                      <small class="d-block mb-1">April 22, 2018</small>
                      <h3 class="h6 text-white mb-0">
                        <a href="#">Ideas to stay happy and productive all day for 365 days</a>
                      </h3>
                    </div>
                  </article>
                  <!-- End Blog Masonry -->

                  <!-- Blog Masonry -->
                  <article class="card border-0 mb-3">
                    <img class="img-fluid rounded" src="../../assets/img/380x250/img8.jpg" alt="Image Description">
                    <div class="card-body p-5">
                      <small class="d-block text-secondary mb-1">April 29, 2018</small>
                      <h3 class="h6 mb-0">
                        <a href="#">Classic design principles</a>
                      </h3>
                    </div>
                  </article>
                  <!-- End Blog Masonry -->

                  <!-- Blog Masonry -->
                  <article class="card border-0 mb-3">
                    <img class="img-fluid rounded" src="../../assets/img/500x550/img4.jpg" alt="Image Description">
                    <div class="card-body p-5">
                      <small class="d-block text-secondary mb-1">April 1, 2018</small>
                      <h3 class="h6 mb-0">
                        <a href="single-article-classic.html">Smartbtc sees the need for contracts</a>
                      </h3>
                    </div>
                  </article>
                  <!-- End Blog Masonry -->
                </div>
              
            

Agency news blog #1

              
                <div class="container u-cubeportfolio">
                  <!-- Content -->
                  <div class="cbp mb-7"
                       data-layout="mosaic"
                       data-animation="quicksand"
                       data-x-gap="30"
                       data-y-gap="30"
                       data-media-queries='[
                        {"width": 1500, "cols": 3},
                        {"width": 1100, "cols": 3},
                        {"width": 800, "cols": 3},
                        {"width": 480, "cols": 1}
                    ]'>
                    <!-- Item -->
                    <div class="cbp-item">
                      <div class="cbp-caption">
                        <!-- Blog Card -->
                        <article class="card border-0">
                          <div class="card-body p-0">
                            <div class="row align-items-stretch no-gutters">
                              <div class="col-md-6">
                                <div class="p-5">
                                  <!-- Post Info -->
                                  <ul class="list-inline small text-muted mb-1">
                                    <li class="list-inline-item mr-0">Scott Levine</li>
                                    <li class="list-inline-item mx-2">–</li>
                                    <li class="list-inline-item">30 mins ago</li>
                                  </ul>
                                  <!-- End Post Info -->

                                  <!-- Info -->
                                  <div class="mb-4">
                                    <h2 class="h5 mb-3">
                                      <a href="#">2018's Most Relaxing and Affordable Vacations</a>
                                    </h2>
                                    <p>At Wake, our mission has always been focused on bringing openness and transparency to the design process.</p>
                                  </div>
                                  <!-- End Info -->

                                  <!-- Labels -->
                                  <ul class="list-inline mb-0">
                                    <li class="list-inline-item g-mb-10">
                                      <a class="btn btn-xs btn-soft-danger" href="#">Start-Up</a>
                                    </li>
                                  </ul>
                                  <!-- End Labels -->
                                </div>
                              </div>
                              <div class="col-md-6 bg-img-hero min-height-300 rounded" style="background-image: url(../../assets/img/500x550/img1.jpg);"></div>
                            </div>
                          </div>
                        </article>
                        <!-- End Blog Card -->
                      </div>
                    </div>
                    <!-- End Item -->

                    <!-- Item -->
                    <div class="cbp-item">
                      <div class="cbp-caption">
                        <!-- Blog Card -->
                        <article class="card border-0">
                          <img class="card-img-top" src="../../assets/img/450x450/img2.jpg" alt="Image Description">

                          <div class="card-body p-5">
                            <!-- Post Info -->
                            <ul class="list-inline small text-muted mb-1">
                              <li class="list-inline-item mr-0">Charlotte Moore</li>
                              <li class="list-inline-item mx-2">–</li>
                              <li class="list-inline-item">4 hours ago</li>
                            </ul>
                            <!-- End Post Info -->

                            <!-- Info -->
                            <div class="mb-4">
                              <h3 class="h5 mb-0">
                                <a href="#">Love for food always comes first</a>
                              </h3>
                            </div>
                            <!-- End Info -->

                            <!-- Labels -->
                            <ul class="list-inline mb-0">
                              <li class="list-inline-item g-mb-10">
                                <a class="btn btn-xs btn-soft-success" href="#">Food</a>
                              </li>
                              <li class="list-inline-item g-mb-10">
                                <a class="btn btn-xs btn-soft-warning btn-pill" href="#">Art</a>
                              </li>
                            </ul>
                            <!-- End Labels -->
                          </div>
                        </article>
                        <!-- End Blog Card -->
                      </div>
                    </div>
                    <!-- End Item -->

                    <!-- Item -->
                    <div class="cbp-item">
                      <div class="cbp-caption">
                        <!-- Blog Card -->
                        <article class="card border-0">
                          <img class="card-img-top" src="../../assets/img/450x450/img5.jpg" alt="Image Description">

                          <div class="card-body p-5">
                            <!-- Post Info -->
                            <ul class="list-inline small text-muted mb-1">
                              <li class="list-inline-item mr-0">Charlotte Moore</li>
                              <li class="list-inline-item mx-2">–</li>
                              <li class="list-inline-item">23 hours ago</li>
                            </ul>
                            <!-- End Post Info -->

                            <!-- Info -->
                            <div class="mb-4">
                              <h3 class="h5 mb-0">
                                <a href="#">InVision is investing $5 million in design startups</a>
                              </h3>
                            </div>
                            <!-- End Info -->

                            <!-- Labels -->
                            <ul class="list-inline mb-0">
                              <li class="list-inline-item g-mb-10">
                                <a class="btn btn-xs btn-soft-warning btn-pill" href="#">House</a>
                              </li>
                              <li class="list-inline-item g-mb-10">
                                <a class="btn btn-xs btn-soft-warning btn-pill" href="#">Real Estate</a>
                              </li>
                            </ul>
                            <!-- End Labels -->
                          </div>
                        </article>
                        <!-- End Blog Card -->
                      </div>
                    </div>
                    <!-- End Item -->

                    <!-- Item -->
                    <div class="cbp-item">
                      <div class="cbp-caption">
                        <!-- Blog Card -->
                        <article class="card border-0 bg-primary text-center">
                          <a class="card-body py-9 px-7" href="#">
                            <!-- SVG Quote -->
                            <figure class="mx-auto mb-3">
                              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
                                 viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                                <path class="fill-white" opacity=".7" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                                  C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                                  c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                                  C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                              </svg>
                            </figure>
                            <!-- End SVG Quote -->

                            <h3 class="h4 text-white mb-4">In the future, design principles won't be about design</h3>
                            <small class="d-block text-white-70 mb-1">Andrea Gard</small>
                          </a>
                        </article>
                        <!-- End Blog Card -->
                      </div>
                    </div>
                    <!-- End Item -->
                  </div>
                  <!-- End Content -->
                </div>
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>

                <!-- JS Implementing Plugins -->
                <script src="../../assets/js/components/hs.cubeportfolio.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of cubeportfolio
                    $.HSCore.components.HSCubeportfolio.init('.cbp');
                  });
                </script>
              
            

Thumbnail news blog #1

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

Thumbnail news blog #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>