Card

Basic

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

Color

<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.

<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

<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 -->