<div class="row">
<div class="col-sm-12">
<div class="elements--title">
<h4>Vertical Blog Cards</h4>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="card card-4">
<div class="card__image"><a href="#"><img alt="Pic" data-entity-type="" data-entity-uuid="" src="/sites/default/files/images/small4.jpg" /> </a></div>

<div class="card__body boxed boxed--sm bg--white">
<h6><a href="#">Food &amp; Travel</a></h6>

<div class="card__title">
<h5><a href="#">Exploring New York's most popular coffee shops</a></h5>
</div>

<hr />
<div class="card__lower"><a href="#"><span>by</span> <span class="h6">Luke Gibson</span> </a></div>
</div>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="card card-4">
<div class="card__image"><a href="#"><img alt="Pic" data-entity-type="" data-entity-uuid="" src="/sites/default/files/images/small1.jpg" /> </a></div>

<div class="card__body boxed boxed--sm bg--white">
<h6><a href="#">Marketing</a></h6>

<div class="card__title">
<h5><a href="#">Advice for stirring your online community and fostering engagement</a></h5>
</div>

<hr />
<div class="card__lower"><a href="#"><span>by</span> <span class="h6">Abby Bollard</span> </a></div>
</div>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="card card-4">
<div class="card__image"><a href="#"><img alt="Pic" data-entity-type="" data-entity-uuid="" src="/sites/default/files/images/small2.jpg" /> </a></div>

<div class="card__body boxed boxed--sm bg--white">
<h6><a href="#">Technology</a></h6>

<div class="card__title">
<h5><a href="#">Opinion: Mobile camera apps have reached saturation point</a></h5>
</div>

<hr />
<div class="card__lower"><a href="#"><span>by</span> <span class="h6">Cameron Smith</span> </a></div>
</div>
</div>
</div>
</div>
