Cards
Base
Card title
Card content
<div class="card">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>Colors
Out of the box colors include .card--primary-color, .card--secondary-color, .card--tertiary-color, and .card--inversed.
Create your own branded cards by using the card color mixin: @include card-color($border-color, $background-color, $color, $content-background-color);.
You may also want to custom the link colors inside a card. Use the link mixin: link($link-color, $link-visited-color, $link-hover-color, $link-active-color);.
Primary Color
Card title
Card content
<div class="card card--primary-color">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>Secondary Color
Card title
Card content
<div class="card card--secondary-color">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>Tertiary Color
Card title
Card content
<div class="card card--tertiary-color">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>Inversed
Card title
Card content
<div class="card card--inversed">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>Variations
Card title
Card content
<div class="row">
<div class="col col--xs-12 col--sm-6 col--md-3 col--flex">
<div class="card">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
</div>
<div class="col col--xs-12 col--sm-6 col--md-3 col--flex">
<div class="card">
<div class="card--header">
<img src="http://placehold.it/600x200?text=Card+Image" alt="" />
</div>
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
</div>
</div>
<div class="col col--xs-12 col--sm-6 col--md-3 col--flex">
<div class="card">
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
</div>
<div class="col col--xs-12 col--sm-6 col--md-3 col--flex">
<div class="card">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content">
<img src="http://placehold.it/600x200?text=Card+Image" alt="" />
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
</div>
</div>
</div>Masonry Cards
Wrap a collection of .card elements in a .cards element to create a masonry grid of cards using the CSS column property. Control the number of columns (two, three, or four) through column classes at different breakpoints:
cards-col-2--xxscards-col-2--xscards-col-2--smcards-col-2--mdcards-col-2--lgcards-col-2--xlcards-col-2--xxl
cards-col-3--xxscards-col-3--xscards-col-3--smcards-col-3--mdcards-col-3--lgcards-col-3--xlcards-col-3--xxl
cards-col-4--xxscards-col-4--xscards-col-4--smcards-col-4--mdcards-col-4--lgcards-col-4--xlcards-col-4--xxl
Card title
Card content
Card title
Card content
Card title
Card content
Card title
Card content
Card title
Card content
<div class="cards cards-col-2--xs cards--col-3--md cards--col-4--xl">
<div class="card card--primary-color">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card card--primary-color">
<div class="card--header">
<img src="http://placehold.it/600x200?text=Card+Image" alt="" />
</div>
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
</div>
<div class="card card--primary-color">
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card card--secondary-color">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card card--secondary-color">
<div class="card--header">
<img src="http://placehold.it/600x200?text=Card+Image" alt="" />
</div>
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
</div>
<div class="card card--secondary-color">
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card card--tertiary-color">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card card--tertiary-color">
<div class="card--header">
<img src="http://placehold.it/600x200?text=Card+Image" alt="" />
</div>
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
</div>
<div class="card card--tertiary-color">
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card card--inversed">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card card--inversed">
<div class="card--header">
<img src="http://placehold.it/600x200?text=Card+Image" alt="" />
</div>
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
</div>
<div class="card card--inversed">
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card">
<div class="card--header">
<img src="http://placehold.it/600x200?text=Card+Image" alt="" />
</div>
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
</div>
<div class="card">
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
</div>