Cards

Info

This framework's cards provide a flexible and extensible content container with multiple variants and options.

The Card

The basic Card

card

card-body

<div class="card">
  <div class="card-body">
    <p>Contents</p>
  </div>
</div>

Set width, margin, center, image top and text

card margin width-400 box-center

top

<div class="card margin width-400 box-center">
  <img alt="" class="top" src="">
  <div class="card-body">
    <p>Contents</p>
  </div>
</div>

Add text header, text subheader, link and button

Header

Sub Header

Link

<div class="card margin width-400 box-center">
  <img alt="" class="top" src="">
  <div class="card-body">
    <h3 class="text-center">Header</h3>
    <h5 class="text-center">Sub Header</h5>
    <p>Contents</p>
    <p class="text-center"><a class="link" href="#">Link</a></p>
    <div class="text-center"><button class="button button-black">button</button></div>
  </div>
</div>

Add header and footer

Header

Header Text

Footer

card-header

card-footer

<div class="card margin width-400 box-center">
  <div class="card-header"><p>Header</p></div>
  <img alt="" src="">
  <div class="card-body">
    <h3 class="text-center">Header Text</h3>
    <p>Contents</p>
    <div class="text-center"><button class="button button-black">button</button></div>
  </div>
  <div class="card-footer"><p>Footer</p></div>
</div>

Place the cards in a row and column and add hover

Header

Header Text

Footer

Header

Header Text

Footer

card-card-hover

<div class="row">
  <div class="col-md">
    <div class="card margin width-400 box-center card-hover">
      Card 1
    </div>
  </div>
  <div class="col-md">
    <div class="card margin width-400 box-center card-hover">
      Card 2
    </div>
  </div>
</div>

Image above or below

Header Text

top

bottom

<div class="card margin width-400 box-center">
  <img alt="" class="top" src="">
  <div class="card-body">
    <h3 class="text-center">Header Text</h3>
    <p >Contents</p>
    <div class="text-center"><button class="button button-black">button</button></div>
  </div>
</div>

<div class="card margin width-400 box-center">
  <div class="card-body">
    <h3 class="text-center">Header Text</h3>
    <p >Contents</p>
    <div class="text-center"><button class="button button-black">button</button></div>
  </div>
  <img alt="" class="bottom" src="">
</div>

Image overlay

Header

Sub Header

<div class="card margin width-600 white-space-600 box-center">
  <img alt="" class="cover" src="">
  <div class="position-absolute-top-center">
    <h3 class="text-center bg-black-op">Header</h3>
    <h5 class="text-center bg-black-op">Sub Header</h5>
    <p class="bg-black-op">Contents</p>
  </div>                        
</div>

Colors

Black

Header

Header Text

Footer

card-black

<div class="card card-black">

White

Header

Header Text

Footer

card-white

<div class="card card-white">

Gray

Header

Header Text

Footer

card-gray

<div class="card card-gray">

Blue

Header

Header Text

Footer

card-blue

<div class="card card-blue">

Green

Header

Header Text

Footer

card-green

<div class="card card-green">

Teal

Header

Header Text

Footer

card-teal

<div class="card card-teal">

Red

Header

Header Text

Footer

card-red

<div class="card card-red">

Yellow

Header

Header Text

Footer

card-yellow

<div class="card card-yellow">

Orange

Header

Header Text

Footer

card-orange

<div class="card card-orange">

Brown

Header

Header Text

Footer

card-brown

<div class="card card-brown">

Purple

Header

Header Text

Footer

card-purple

<div class="card card-purple">

Pink

Header

Header Text

Footer

card-pink

<div class="card card-pink">