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.
Show code
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.
How to find the right design for your specific product
Some quick example text tod make up the bulk of the card's content.
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.
Choose the best solution for your business
Some quick example text tod make up the bulk of the card's content.
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.
<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>