---
title: Masonry
---

{{#extend "layout-default"}}

  {{#content "css" mode="prepend"}}
    <link rel="stylesheet" href="{{assets}}/examples/css/advanced/masonry.css">
  {{/content}}


  {{#content "js_vendor" mode="append"}}
    <script src="{{global}}/vendor/imagesloaded/imagesloaded.pkgd.js"></script>
    <script src="{{global}}/vendor/masonry/masonry.pkgd.js"></script>
  {{/content}}

  {{#content "js" mode="append"}}
    <script src="{{global}}/js/Plugin/masonry.js"></script>
  {{/content}}


  {{#content "body"}}

    <div class="page">
      <div class="page-content">
        <ul class="blocks blocks-100 blocks-xxl-4 blocks-lg-3 blocks-md-2" data-plugin="masonry">
          <li class="masonry-item">
            <div class="card card-shadow">
              <div class="card-header cover">
                <img class="cover-image" src="{{global}}/photos/placeholder.png" alt="...">
              </div>
              <div class="card-block">
                <h3 class="card-title">Genus Quaerimus</h3>
                <p class="card-text type-link">
                  <small>
                    By
                    <a href="javascript:void(0)">Nathan Watts</a>
                    <a href="javascript:void(0)">05, 2017</a>
                    <a href="javascript:void(0)">
                      <span>3</span> Comments</a>
                  </small>
                </p>
                <p class="card-text">Dolemus late utriusque fore eveniet provincia spernat dissentiet.
                  Fit intemperantes.</p>
              </div>
              <div class="card-block">
                <div class="card-actions float-right">
                  <a href="javascript:void(0)">
                <i class="icon md-favorite" aria-hidden="true"></i>
                <span>108</span>
              </a>
                </div>
                <button type="button" class="btn btn-info card-link">Read more</button>
              </div>
            </div>
          </li>
          <li class="masonry-item">
            <div class="card card-shadow">
              <div class="card-header cover">
                <img class="cover-image" src="{{global}}/photos/placeholder.png" alt="...">
              </div>
              <div class="card-block">
                <h3 class="card-title">Beatus Nature</h3>
                <p class="card-text type-link">
                  <small>
                    By
                    <a href="javascript:void(0)">Heather Harper</a>
                    <a href="javascript:void(0)">04, 2017</a>
                    <a href="javascript:void(0)">
                      <span>2</span> Comments</a>
                  </small>
                </p>
                <p class="card-text">Antipatrum autem aegritudine, torquate seque etiam iucunditatem
                  bello multa feramus.</p>
              </div>
              <div class="card-block">
                <div class="card-actions float-right">
                  <a href="javascript:void(0)">
                <i class="icon md-favorite" aria-hidden="true"></i>
                <span>120</span>
              </a>
                </div>
                <button type="button" class="btn btn-info">Read more</button>
              </div>
            </div>
          </li>
          <li class="masonry-item">
            <div class="card card-shadow">
              <div class="card-header cover">
                <div class="cover-background p-30" style="background-image: url('{{global}}/photos/placeholder.png')">
                  <blockquote class="blockquote cover-quote white">Lorem ipsum dolor sit amet. Integer nec odio. Praesent libero.
                    Sed cursus ante dapibus diam. </blockquote>
                </div>
              </div>
              <div class="card-block">
                <p class="card-text type-link mb-0">
                  By
                  <a href="javascript:void(0)">Crystal Bates</a>
                  <a href="javascript:void(0)">02, 2017</a>
                  <a href="javascript:void(0)">
                    <span>5</span> Comments</a>
                </p>
              </div>
            </div>
          </li>
          <li class="masonry-item">
            <div class="card card-shadow">
              <div class="card-header cover">
                <img class="cover-image" src="{{global}}/photos/placeholder.png" alt="...">
              </div>
              <div class="card-block">
                <h3 class="card-title">Restincto Multi</h3>
                <p class="card-text type-link">
                  <small>
                    By
                    <a href="javascript:void(0)">Edward Fletcher</a>
                    <a href="javascript:void(0)">05, 2017</a>
                    <a href="javascript:void(0)">
                      <span>2</span> Comments</a>
                  </small>
                </p>
                <p class="card-text">Modice accuratius physicis supplicii divinum pariatur graviter
                  horribiles sunt, genus.</p>
              </div>
              <div class="card-block">
                <div class="card-actions float-right">
                  <a href="javascript:void(0)">
                <i class="icon md-favorite" aria-hidden="true"></i>
                <span>130</span>
              </a>
                </div>
                <button type="button" class="btn btn-info">Read more</button>
              </div>
            </div>
          </li>
          <li class="masonry-item">
            <div class="card card-shadow">
              <div class="card-header cover">
                <img class="cover-image" src="{{global}}/photos/placeholder.png" alt="...">
              </div>
              <div class="card-block">
                <h3 class="card-title">Contentam Sumus</h3>
                <p class="card-text type-link">
                  <small>
                    By
                    <a href="javascript:void(0)">June Lane</a>
                    <a href="javascript:void(0)">05, 2017</a>
                    <a href="javascript:void(0)">
                      <span>2</span> Comments</a>
                  </small>
                </p>
                <p class="card-text">Sit doctus adoptionem nudus voluptatem fugiendum assentior, copulationes
                  consedit poetis.</p>
              </div>
              <div class="card-block">
                <div class="card-actions float-right">
                  <a href="javascript:void(0)">
                <i class="icon md-favorite" aria-hidden="true"></i>
                <span>120</span>
              </a>
                </div>
                <button type="button" class="btn btn-info">Read more</button>
              </div>
            </div>
          </li>
          <li class="masonry-item">
            <div class="card card-shadow">
              <div class="card-header cover">
                <img class="cover-image" src="{{global}}/photos/placeholder.png" alt="...">
              </div>
              <div class="card-block">
                <h3 class="card-title">Delectamur Angusta</h3>
                <p class="card-text type-link">
                  <small>
                    By
                    <a href="javascript:void(0)">Caleb Richards</a>
                    <a href="javascript:void(0)">06, 2017</a>
                    <a href="javascript:void(0)">
                      <span>2</span> Comments</a>
                  </small>
                </p>
                <p class="card-text">Finitas inermis solum attico, dein horrent eruditionem sollicitare
                  reddidisti, administrari.</p>
              </div>
              <div class="card-block">
                <div class="card-actions float-right">
                  <a href="javascript:void(0)">
                <i class="icon md-favorite" aria-hidden="true"></i>
                <span>120</span>
              </a>
                </div>
                <button type="button" class="btn btn-info">Read more</button>
              </div>
            </div>
          </li>
          <li class="masonry-item">
            <div class="card card-shadow">
              <div class="card-header cover">
                <div class="cover-background p-30" style="background-image: url('{{global}}/photos/placeholder.png')">
                  <blockquote class="blockquote cover-quote white">Lorem ipsum dolor sit amet. Integer nec odio. Praesent libero.
                    Sed cursus ante dapibus diam. </blockquote>
                </div>
              </div>
              <div class="card-block">
                <p class="card-text type-link mb-0">
                  By
                  <a href="javascript:void(0)">Mary Adams</a>
                  <a href="javascript:void(0)">03, 2017</a>
                  <a href="javascript:void(0)">
                    <span>2</span> Comments</a>
                </p>
              </div>
            </div>
          </li>
          <li class="masonry-item">
            <div class="card card-shadow">
              <div class="card-header cover">
                <img class="cover-image" src="{{global}}/photos/placeholder.png" alt="...">
              </div>
              <div class="card-block">
                <h3 class="card-title">Appareat Conducunt</h3>
                <p class="card-text type-link">
                  <small>
                    By
                    <a href="javascript:void(0)">Herman Beck</a>
                    <a href="javascript:void(0)">03, 2017</a>
                    <a href="javascript:void(0)">
                      <span>8</span> Comments</a>
                  </small>
                </p>
                <p class="card-text">Ignorare correcta hanc democrito, expetendis iure natum cognomen
                  finxerat claris.</p>
              </div>
              <div class="card-block">
                <div class="card-actions float-right">
                  <a href="javascript:void(0)">
                <i class="icon md-favorite" aria-hidden="true"></i>
                <span>120</span>
              </a>
                </div>
                <button type="button" class="btn btn-info">Read more</button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

  {{/content}}
{{/extend}}