Masonry

Masonry layout

Masonry layouts are using the Bootstrap grid system for creating columns and organizing content. The starter template you have to use in order to get a masonry layout is the following:

    <div class="masonry-container">
        <div class="row masonry">
            <div class="masonry-item col-sm-6">
            ...
            </div>
        </div>
    </div>
    

Use any of the system's column classes in order to create the masonry layout - e.g: col-sm-6, col-sm-4, col-sm-3 and so on.

Masonry layout with filters

You can easily sort through the masonry items by adding filter names on top of a item as bellow, where branding is name of the filter:

    <div class="masonry-container">
        <div class="masonry-filter-menu link-menu link-menu--style-1">
            <a class="btn-filter" data-filter="*">Show all</a>
            <a class="btn-filter" data-filter="branding">Branding</a>
            <a class="btn-filter" data-filter="identity">Identity</a>
        </div>

        <div class="row masonry">
            <div class="masonry-item col-sm-6 branding">
                ...
            </div>

            <div class="masonry-item col-sm-6 identity">
                ...
            </div>
        </div>
    </div>