<div class="card">
<img src="http://placekitten.com/g/400/200" />
<div class="card-divider">
This is a header
</div>
<div class="card-section">
<h4>Look at This Swag Card</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi iusto reprehenderit voluptatem odio deleniti provident aliquam qui magnam aspernatur necessitatibus.</p>
</div>
</div>
However, if one wants to make a link out of the whole card, the layout breaks, because it should be display: block.
<a class="card">
<img src="http://placekitten.com/g/400/200" />
<span class="card-divider">
This is a header
</span>
<span class="card-section">
<h4>Look at This Swag Card</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi iusto reprehenderit voluptatem odio deleniti provident aliquam qui magnam aspernatur necessitatibus.</p>
</span>
</a>
Cards are assumed to be used as divs:
However, if one wants to make a link out of the whole card, the layout breaks, because it should be
display: block
.A temporary fix I use:
It would be nice to get this on default.