Only body

box-body
box-body with border
box-body with border & radius
box-body background

With Header

Header

box-body

Header

box-body with border

Header

box-body with border & radius

Header

box-body background

With Footer

box-body
Footer
box-body with border
Footer
box-body with border & radius
Footer
box-body background
Footer

Mixins

Title

43%
123
sub
123

sub

sub sub

Title

43%
123
sub
f-5 text-belize-hole

Examples

TITLE

$123,45
sub title
text-center h1


Box

box-tools
<div class="box">
  <header>
    <h2>Box</h2>
    <div class="box-tools">
      box-tools
    </div>
  </header>
  <div class="box-body">
    content ...
  </div>
</div>
box-tools

Box

<div class="box">
  <header>
    <div class="box-tools">
      box-tools
    </div>
      <h2>Box</h2>
  </header>
  <div class="box-body">
    content ...
  </div>
</div>
<div class="box">
  <div class="box-body">
    no header
  </div>
</div>
<div class="box">
  <div class="box-body p-a-0">
    no header & no padding
  </div>
</div>

Header 2

label
box-body

Header 3

label
box-body

Header 4

label
box-body
Header 5
label
box-body
Header 6
label
box-body

Collapsible

lorem ...

Collapsed

lorem ...

Closable

lorem ...

Full Screen

click esc button for exit fullscreen mode.

Mixin

lorem ...

Mixin 2

lorem ...

Background Color

lorem ...

Background Color

lorem ...

Border Radius

lorem ...

Border

lorem ...

Shadow

badge

Available Shadow Class

shadow-2dp
shadow-3dp
shadow-4dp
shadow-6dp
shadow-8dp
shadow-16dp
shadow-24dp