---
title: Cards Masonry
page-header: Cards Masonry
menu: base.cards.masonry
libs: masonry
---

{% assign heights = '200,150,400,300,350,600,700,200,150,250,50,400,300,200' | split: ',' %}

<div class="row row-cards" data-masonry='{"percentPosition": true }'>
	{% for height in heights %}
	<div class="col-sm-6 col-lg-4">
		<div class="card">
			{% include cards/body-placeholder.html height=height %}
		</div>
	</div>
	{% endfor %}
</div>