Cards

Useful for displaying a heading, content, and call-to-action in a box. Optionally supports a label, and two different sized icons. Use with the Grid for positioning.


Card

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!
<div class="Card g-1_3">
<h3 class="Card__heading">Whatever</h3>
<p class="Card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="Button">Go!</a>
</div>

Card With Icon

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!
<div class="Card g-1_3">
<img src="src/image.svg" class="Card__icon" />
<h3 class="Card__heading">Whatever</h3>
<p class="Card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="Button Button--text">Go!</a>
</div>

Card With Large Icon

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!
<div class="Card g-1_3">
<img src="src/image.svg" class="Card__large-icon" />
<label class="Card__super">Superscript</label>
<h3 class="Card__heading">Whatever</h3>
<p class="Card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="Button">Go!</a>
</div>