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>