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

John Smith Avatar
Some Text!
alt text

Some Text!

Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.

<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>
Button

Primary Area!

Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.

Primary Area!

Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.