News Blog - Masonry

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

Masonry #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>
                  
                

Masonry #2

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