Cards
A card is a sheet of material that serves as an entry point to more detailed information. A card could contain a photo, text, and a link about a single subject.
Basic Cards
Default Card
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
<div class="card">
<div class="card-main">
<div class="card-inner"> ... </div>
<div class="card-action"> ... </div>
</div>
</div>
Brand Colours
Brand
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
<div class="card card-brand">
<div class="card-main">
<div class="card-inner"> ... </div>
<div class="card-action"> ... </div>
</div>
</div>
Brand Accent
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
<div class="card card-brand-accent">
<div class="card-main">
<div class="card-inner"> ... </div>
<div class="card-action"> ... </div>
</div>
</div>
Colour Palettes
.card-green
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
.card-orange
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
.card-red
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
Media Area
<div class="card">
<div class="card-main">
<div class="card-header">
...
<div class="card-inner"> ... </div>
</div>
<div class="card-img">
...
<p class="card-img-heading"> ... </p>
</div>
<div class="card-inner"> ... </div>
<div class="card-action"> ... </div>
</div>
</div>
Vertical Area
Primary Area!
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
<div class="card">
<aside class="card-side pull-left"> ... </aside>
<div class="card-main"> ... </div>
</div>
Primary Area!
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
Primary Area!
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.