Masonry

Documentation and examples for creating, filtering and sorting magical layouts with the power of Isotope.

Usage

JS

In order to use this plugin on your page you will need to include the following script in the “Page JS” area from the page’s footer:

<script src="../../assets/libs/isotope-layout/dist/isotope.pkgd.min.js"></script>

Initialization

Now, we need to add basic Masonry layout to our app. You can use the grid’s .col-* classes for setting the column’s width.

Image placeholder
25 April, 2020 Choose the best solution for your business

No matter what he does, every person on earth plays a central role in the history.

JD David Wally
50 250
How to find the right design for your specific product

Some quick example text tod make up the bulk of the card's content.

Image placeholder
Betty Mavis
Image placeholder
25 April, 2020 Win buyers and influence sales with marketing

No matter what he does, every person on earth plays a central role in the history.

JD David Wally
50 250
Choose the best solution for your business

Some quick example text tod make up the bulk of the card's content.

Image placeholder
Betty Mavis
Image placeholder
25 April, 2020 How to find the right design for your specific product

No matter what he does, every person on earth plays a central role in the history.

JD David Wally
50 250
<div class="masonry-container">
    <div class="row masonry">
        <div class="masonry-item col-xl-4 col-md-6">
            <div class="card hover-translate-y-n3 hover-shadow-lg overflow-hidden">
                <div class="position-relative overflow-hidden">
                    <a href="#" class="d-block">
                        <img alt="Image placeholder" src="../../assets/img/theme/light/blog-1-800x600.jpg" class="card-img-top">
                    </a>
                </div>
                <div class="card-body py-4">
                    <small class="d-block text-sm mb-2">25 April, 2020</small>
                    <a href="#" class="h5 stretched-link lh-150">Choose the best solution for your business</a>
                    <p class="mt-3 mb-0 lh-170">No matter what he does, every person on earth plays a central role in the history.</p>
                </div>
                <div class="card-footer border-0 delimiter-top">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="avatar avatar-sm bg-primary rounded-circle">JD</span>
                            <span class="text-sm mb-0 avatar-content">David Wally</span>
                        </div>
                        <div class="col text-right text-right">
                            <div class="actions">
                                <a href="#" class="action-item"><i data-feather="heart" class="mr-1"></i> 50</a>
                                <a href="#" class="action-item"><i data-feather="eye" class=" mr-1"></i> 250</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="masonry-item col-xl-4 col-md-6">
            <div class="card hover-translate-y-n3 hover-shadow-lg bg-cover bg-size--cover" style="background-image: url(../../assets/img/theme/light/blog-1-600x800.jpg);">
                <!-- Mask -->
                <span class="mask bg-dark opacity-8"></span>

                <!-- Card body -->
                <div class="card-body pt-10 mt-auto position-relative">

                    <!-- Title -->
                    <a href="#" class="d-block h5 mb-3 text-white stretched-link">How to find the right design for your specific product</a>

                    <!-- Text -->
                    <p class="mb-0 text-white">
                        Some quick example text tod make up the bulk of the card's content.
                    </p>
                </div>

                <!-- Meta -->
                <div class="card-body position-relative delimiter-top">
                    <div class="d-flex align-items-center">
                        <div>
                            <a href="#" class="avatar avatar-sm rounded-circle d-inline-block">
                                <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg">
                            </a>
                        </div>
                        <div class="pl-3">
                            <a href="#" class="h6 stretched-link text-white text-sm">Betty Mavis</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="masonry-item col-xl-4 col-md-6">
            <div class="card hover-translate-y-n3 hover-shadow-lg overflow-hidden">
                <div class="position-relative overflow-hidden">
                    <a href="#" class="d-block">
                        <img alt="Image placeholder" src="../../assets/img/theme/light/blog-2-800x600.jpg" class="card-img-top">
                    </a>
                </div>
                <div class="card-body py-4">
                    <small class="d-block text-sm mb-2">25 April, 2020</small>
                    <a href="#" class="h5 stretched-link lh-150">Win buyers and influence sales with marketing</a>
                    <p class="mt-3 mb-0 lh-170">No matter what he does, every person on earth plays a central role in the history.</p>
                </div>
                <div class="card-footer border-0 delimiter-top">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="avatar avatar-sm bg-primary rounded-circle">JD</span>
                            <span class="text-sm mb-0 avatar-content">David Wally</span>
                        </div>
                        <div class="col text-right text-right">
                            <div class="actions">
                                <a href="#" class="action-item"><i data-feather="heart" class="mr-1"></i> 50</a>
                                <a href="#" class="action-item"><i data-feather="eye" class=" mr-1"></i> 250</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="masonry-item col-xl-4 col-md-6">
            <div class="card hover-translate-y-n3 hover-shadow-lg bg-cover bg-size--cover" style="background-image: url(../../assets/img/theme/light/blog-1-800x800.jpg);">
                <!-- Mask -->
                <span class="mask bg-primary opacity-8"></span>

                <!-- Card body -->
                <div class="card-body pt-10 mt-auto position-relative">

                    <!-- Title -->
                    <a href="#" class="d-block h5 mb-3 text-white stretched-link">Choose the best solution for your business</a>

                    <!-- Text -->
                    <p class="mb-0 text-white">
                        Some quick example text tod make up the bulk of the card's content.
                    </p>
                </div>

                <!-- Meta -->
                <div class="card-body position-relative delimiter-top">
                    <div class="d-flex align-items-center">
                        <div>
                            <a href="#" class="avatar avatar-sm rounded-circle d-inline-block">
                                <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg">
                            </a>
                        </div>
                        <div class="pl-3">
                            <a href="#" class="h6 stretched-link text-white text-sm">Betty Mavis</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="masonry-item col-xl-4 col-md-6">
            <div class="card hover-translate-y-n3 hover-shadow-lg overflow-hidden">
                <div class="position-relative overflow-hidden">
                    <a href="#" class="d-block">
                        <img alt="Image placeholder" src="../../assets/img/theme/light/blog-3-800x600.jpg" class="card-img-top">
                    </a>
                </div>
                <div class="card-body py-4">
                    <small class="d-block text-sm mb-2">25 April, 2020</small>
                    <a href="#" class="h5 stretched-link lh-150">How to find the right design for your specific product</a>
                    <p class="mt-3 mb-0 lh-170">No matter what he does, every person on earth plays a central role in the history.</p>
                </div>
                <div class="card-footer border-0 delimiter-top">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="avatar avatar-sm bg-primary rounded-circle">JD</span>
                            <span class="text-sm mb-0 avatar-content">David Wally</span>
                        </div>
                        <div class="col text-right text-right">
                            <div class="actions">
                                <a href="#" class="action-item"><i data-feather="heart" class="mr-1"></i> 50</a>
                                <a href="#" class="action-item"><i data-feather="eye" class=" mr-1"></i> 250</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Summary