View on GitHub

Box

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

Basic example

This is an example box

<div class="box box-light">
  <div class="box-body">
    This is an example box
  </div>
</div>

Box Headlines

Box Headline

This is an example box

<div class="box box-light">
  <div class="box-header col-3">Box Headline
  </div>
  <div class="box-body">
    This is an example box
  </div>
</div>

Stacking Boxes

Box Headline

This is a Box in a Box

<div class="box box-light">
  <div class="box-header col-3">Box Headline
  </div>
  <div class="box-body">
    <div class="box box-ice">
      <div class="box-body">
        This is a Box in a Box
      </div>
    </div>
  </div>
</div>

Color Variants

Ice

This is a Ice-Box

Super-Light

This is a Super-Light-Box

Light

This is a Light-Box

Steel

This is a Steel-Box

Ocean

This is a Ocean-Box

Midnight

This is a Midnight-Box

Cosmos

This is a Cosmos-Box

Deepdark

This is a Deepdark-Box

<div class="box box-ice mb-3">
  <div class="box-header col-3">
    <div class="box-headline">Ice</div>
  </div>
  <div class="box-body">
    This is a Ice-Box
  </div>
</div>

<div class="box box-super-light mb-3">
  <div class="box-header col-3">
    <div class="box-headline">Super-Light</div>
  </div>
  <div class="box-body">
    This is a Super-Light-Box
  </div>
</div>

<div class="box box-light mb-3">
  <div class="box-header col-3">
    <div class="box-headline">Light</div>
  </div>
  <div class="box-body">
    This is a Light-Box
  </div>
</div>

<div class="box box-steel mb-3">
  <div class="box-header col-3">
    <div class="box-headline">Steel</div>
  </div>
  <div class="box-body">
    This is a Steel-Box
  </div>
</div>

<div class="box box-ocean mb-3">
  <div class="box-header col-3">
    <div class="box-headline">Ocean</div>
  </div>
  <div class="box-body">
    This is a Ocean-Box
  </div>
</div>

<div class="box box-midnight mb-3">
  <div class="box-header col-3">
    <div class="box-headline">Midnight</div>
  </div>
  <div class="box-body">
    This is a Midnight-Box
  </div>
</div>

<div class="box box-cosmos mb-3">
  <div class="box-header col-3">
    <div class="box-headline">Cosmos</div>
  </div>
  <div class="box-body">
    This is a Cosmos-Box
  </div>
</div>

<div class="box box-deepdark mb-3">
  <div class="box-header col-3">
    <div class="box-headline">Deepdark</div>
  </div>
  <div class="box-body">
    This is a Deepdark-Box
  </div>
</div>