Components

Card

This is a card:

<div class="card">Card</div>
<div class="primary card">Primary Card</div>
<div class="secondary card">Secondary Card</div>
<div class="tertiary card">Tertiary Card</div>
<div class="success card">Success Card</div>
<div class="danger card">Danger Card</div>
<div class="warning card" >Warning Card</div>
<div class="info card">Info Card</div>

Clickable Cards

<div class="clickable card">Card</div>

Buttons

These are buttons:

<button class="canvas">Canvas</button>
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="tertiary">Tertiary</button>
<button class="success">Success</button>
<button class="danger">Danger</button>
<button class="warning">Warning</button>
<button class="info">Info</button>

Small and big

Just add small and big classes.

<button class="big">Big</button>
<button>Default</button>
<button class="small">Small</button>

Make links look like buttons:

<a href="#" class="canvas button">Canvas</a>
<a href="#" class="primary button">Primary</a>
<a href="#" class="secondary button">Secondary</a>
<a href="#" class="tertiary button">Tertiary</a>
<a href="#" class="success button">Success</a>
<a href="#" class="danger button">Danger</a>
<a href="#" class="warning button">Warning</a>
<a href="#" class="info button">Info</a>

Grid

<div class="grid slice-in-2-xs">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div class="success">item 4</div>
</div>