Boxes

Think in & out the box

Box default

Box example

.box _darken
.box _lighten
<div class="box">
    <p>Box example</p>
	<div class="box _darken">.box _darken</div>
	<div class="box _lighten">.box _lighten</div>
</div>

Box empty

Box example

.box _darken
.box _lighten
<div class="box _empty">
    <p>Box example</p>
	<div class="box _darken">.box _darken</div>
	<div class="box _lighten">.box _lighten</div>
</div>

Box background

Box example

.box _darken
.box _lighten
<div class="box _background">
    <p>Box example</p>
	<div class="box _darken">.box _darken</div>
	<div class="box _lighten">.box _lighten</div>
</div>

Box primary

Box example

.box _darken
.box _lighten
<div class="box _primary">
    <p>Box example</p>
	<div class="box _darken">.box _darken</div>
	<div class="box _lighten">.box _lighten</div>
</div>

Box secondary

Box example

.box _darken
.box _lighten
<div class="box _secondary">
    <p>Box example</p>
	<div class="box _darken">.box _darken</div>
	<div class="box _lighten">.box _lighten</div>
</div>

Box foreground

Box example

.box _darken
.box _lighten
<div class="box _foreground">
    <p>Box example</p>
	<div class="box _darken">.box _darken</div>
	<div class="box _lighten">.box _lighten</div>
</div>

Box ok

Box example

.box _darken
.box _lighten
<div class="box _success">
    <p>Box example</p>
	<div class="box _darken">.box _darken</div>
	<div class="box _lighten">.box _lighten</div>
</div>

Box ko

Box example

.box _darken
.box _lighten
<div class="box _error">
    <p>Box example</p>
	<div class="box _darken">.box _darken</div>
	<div class="box _lighten">.box _lighten</div>
</div>

Box info

Box example

.box _darken
.box _lighten
<div class="box _info">
    <p>Box example</p>
	<div class="box _darken">.box _darken</div>
	<div class="box _lighten">.box _lighten</div>
</div>