Card

Basic

Default

Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus augue.

Shadow

Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus augue.

View example's code

<div class="card"><div class="card-body">...</div></div>
<div class="card shadow-lg"><div class="card-body">...</div></div>

Color

Solid

Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus.

Pale

Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus.

Soft

Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus.

View example's code

<div class="card shadow-none bg-primary text-white"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pale-primary"><div class="card-body">...</div></div>
<div class="card shadow-none bg-soft-primary"><div class="card-body">...</div></div>
  
<div class="card shadow-none bg-yellow text-white"><div class="card-body">...</div></div>
<div class="card shadow-none bg-orange text-white"><div class="card-body">...</div></div>
<div class="card shadow-none bg-red text-white"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pink text-white"><div class="card-body">...</div></div>
<div class="card shadow-none bg-violet text-white"><div class="card-body">...</div></div>
<div class="card shadow-none bg-purple text-white"><div class="card-body">...</div></div>
<div class="card shadow-none bg-blue text-white"><div class="card-body">...</div></div>
<div class="card shadow-none bg-aqua text-white"><div class="card-body">...</div></div>
<div class="card shadow-none bg-green text-white"><div class="card-body">...</div></div>
<div class="card shadow-none bg-leaf text-white"><div class="card-body">...</div></div>
<div class="card shadow-none bg-fuchsia text-white"><div class="card-body">...</div></div>
<div class="card shadow-none bg-sky text-white"><div class="card-body">...</div></div>
<div class="card shadow-none bg-grape text-white"><div class="card-body">...</div></div>
<div class="card shadow-none bg-navy text-white"><div class="card-body">...</div></div>
<div class="card shadow-none bg-ash text-white"><div class="card-body">...</div></div>
  
<div class="card shadow-none bg-pale-yellow"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pale-orange"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pale-red"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pale-pink"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pale-violet"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pale-purple"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pale-blue"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pale-aqua"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pale-green"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pale-leaf"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pale-fuchsia"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pale-sky"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pale-grape"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pale-navy"><div class="card-body">...</div></div>
<div class="card shadow-none bg-pale-ash"><div class="card-body">...</div></div>
  
<div class="card shadow-none bg-soft-yellow"><div class="card-body">...</div></div>
<div class="card shadow-none bg-soft-orange"><div class="card-body">...</div></div>
<div class="card shadow-none bg-soft-red"><div class="card-body">...</div></div>
<div class="card shadow-none bg-soft-pink"><div class="card-body">...</div></div>
<div class="card shadow-none bg-soft-violet"><div class="card-body">...</div></div>
<div class="card shadow-none bg-soft-purple"><div class="card-body">...</div></div>
<div class="card shadow-none bg-soft-blue"><div class="card-body">...</div></div>
<div class="card shadow-none bg-soft-aqua"><div class="card-body">...</div></div>
<div class="card shadow-none bg-soft-green"><div class="card-body">...</div></div>
<div class="card shadow-none bg-soft-leaf"><div class="card-body">...</div></div>
<div class="card shadow-none bg-soft-fuchsia"><div class="card-body">...</div></div>
<div class="card shadow-none bg-soft-sky"><div class="card-body">...</div></div>
<div class="card shadow-none bg-soft-grape"><div class="card-body">...</div></div>
<div class="card shadow-none bg-soft-navy"><div class="card-body">...</div></div>
<div class="card shadow-none bg-soft-ash"><div class="card-body">...</div></div>

Border

Available options:

border-primary, border-aqua, border-green, border-leaf, border-navy, border-orange, border-pink, border-purple, border-red, border-violet, border-yellow, border-fuchsia, border-sky, border-grape, border-soft-primary, border-soft-aqua, border-soft-green, border-soft-leaf, border-soft-navy, border-soft-orange, border-soft-pink, border-soft-purple, border-soft-red, border-soft-violet, border-soft-yellow, border-soft-fuchsia, border-soft-sky, border-soft-grape.

Start

Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus, nisi erat porttitor ligula, eget lacinia.

Top

Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus, nisi erat porttitor ligula, eget lacinia.

Bottom

Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus, nisi erat porttitor ligula, eget lacinia.

End

Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus, nisi erat porttitor ligula, eget lacinia.

View example's code

<div class="card card-border-start border-primary">
  <div class="card-body">...</div>
</div>

<div class="card shadow-lg card-border-top border-primary">
  <div class="card-body">...</div>
</div>

<div class="card bg-soft-primary card-border-end border-soft-primary">
  <div class="card-body">...</div>
</div>

<div class="card bg-soft-primary card-border-bottom border-primary">
  <div class="card-body">...</div>
</div>

Image

Image Cap Top

Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus augue.

Image Cap Bottom

Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus augue.

View example's code

<div class="card">
  <img class="card-img-top" src="..." alt="" />
  <div class="card-body">
    ...
  </div>
  <!--/.card-body -->
</div>
<!--/.card -->

<div class="card">
  <div class="card-body">
    ...
  </div>
  <!--/.card-body -->
  <img class="card-img-bottom" src="..." alt="" />
</div>
<!--/.card -->

Project Pages

Single Projects

Usage

Styleguide

Elements

Card

Basic

Default

Shadow

Color

Solid

Pale

Soft

Border

Start

Top

Bottom

End

Image

Image Cap Top

Image Cap Bottom