Basic Card
<div class="card u-bg-teal">
<div class="card__label">Card Label</div>
<div class="card__title">A Basic Card</div>
<div class="card__cta">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a href="#" class="button">Call To Action</a></p>
</div>
</div>
Small Card
Small cards employ a smaller min-height. Useful when you’re containing cards within grid columns.
<div class="u-span-6">
<div class="card card--small u-bg-teal">
<div class="card__label">Card Label</div>
<div class="card__title">Small Card</div>
<div class="card__cta">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a href="#" class="button">Call To Action</a></p>
</div>
</div>
</div>
<div class="u-span-6">
<div class="card card--small u-bg-teal">
<div class="card__label">Card Label</div>
<div class="card__title">Small Card</div>
<div class="card__cta">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a href="#" class="button">Call To Action</a></p>
</div>
</div>
</div>
Card with image
To apply an image to a card, use the .has-image class. Then, apply your card image with `background-image: url()` in the style attribute.
Optionally, you can also provide the .u-overlay-hover-darken utility to apply an overlay with a hover effect.
<div class="card u-bg-teal has-image u-overlay-hover-darken"
style="background-image:url(http://unsplash.it/1000/1500/)">
<div class="card__label">Card Label</div>
<div class="card__title">Card With Image</div>
<div class="card__cta">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a href="#" class="button">Call To Action</a></p>
</div>
</div>