---
title: Cards Masonry
page-header: Cards Masonry
menu: base.cards.masonry
page-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>