Block heading
This block spans the entire width
<div class="block">
<h2 class="heading--block">Block heading</h2>
This block spans the entire width
</div>
Flex block
This row detects how many columns to span using Javascript.
Flex block
This row detects how many columns to span using Javascript.
<div class="flex-blocks">
<div class="block">
<h2 class="heading--block">Flex block</h2>
This row detects how many columns to span using Javascript.
</div>
<div class="block">
<h2 class="heading--block">Flex block</h2>
This row detects how many columns to span using Javascript.
</div>
</div>
block--50
This block spans 50% of its parent.
block--50
This block spans 50% of its parent.
<div class="block--container">
<div class="block block--50">
<h2 class="heading--block">block--50</h2>
This block spans 50% of its parent.
</div>
<div class="block block--50">
<h2 class="heading--block">block--50</h2>
This block spans 50% of its parent.
</div>
</div>
block--33
This block spans 33% of its parent.
block--33
This block spans 33% of its parent.
block--33
This block spans 33% of its parent.
<div class="block--container">
<div class="block block--33">
<h2 class="heading--block">block--33</h2>
This block spans 33% of its parent.
</div>
<div class="block block--33">
<h2 class="heading--block">block--33</h2>
This block spans 33% of its parent.
</div>
<div class="block block--33">
<h2 class="heading--block">block--33</h2>
This block spans 33% of its parent.
</div>
</div>
block--25
This block spans 25% of its parent.
block--25
This block spans 25% of its parent.
block--25
This block spans 25% of its parent.
block--25
This block spans 25% of its parent.
<div class="block--container">
<div class="block block--25">
<h2 class="heading--block">block--25</h2>
This block spans 25% of its parent.
</div>
<div class="block block--25">
<h2 class="heading--block">block--25</h2>
This block spans 25% of its parent.
</div>
<div class="block block--25">
<h2 class="heading--block">block--25</h2>
This block spans 25% of its parent.
</div>
<div class="block block--25">
<h2 class="heading--block">block--25</h2>
This block spans 25% of its parent.
</div>
</div>
