Cards

Available Sass Variables and default values

$card-shadow: $base-shadow
$card-background-color: $base-background-color
$card-top-bottom-padding: 20px
$card-left-right-padding: 20px
$card-border: 1px solid $base-border-color
$card-font-size: $font-size

$card-header-background: $brand-primary
$card-header-color: $wt
$card-header-padding: $card-top-bottom-padding/2 $card-left-right-padding
$card-header-font-size: $font-size-small
$card-header-font-weight: normal
$card-header-text-align: left
$card-header-text-transform: normal
$card-header-border-bottom: 1px solid $alto

$card-footer-background: $brand-highlight
$card-footer-color: $wt
$card-footer-padding: $card-top-bottom-padding/2 $card-left-right-padding
$card-footer-font-size: $font-size-small
$card-footer-font-weight: normal
$card-footer-text-align: left
$card-footer-border-top: 1px solid $alto

$card-placeholder-border-color: $base-border-color
$card-placeholder-color: $text-color-light

Examples

All classes and markup shown below can be combined on any card

Basic Card

Markup like this

.card Content Goes Here
Content Goes here

Card with Header

Markup like this

.card
  header Card Title
  | Content Goes Here
Card Title
Content Goes Here

Card with Footer

Markup like this

.card
  header Phoenix
  | Content Goes Here
  footer Owner: Samantha Carter
Phoenix
Content Goes Here
Owner: Samantha Carter

Card with Header and count

Markup like this

.card
  header
    | Card Title
    span.pull-right 4
  | Content Goes Here
Card Title4
Content Goes Here

Vertically Centered Card

Generally the card will grow with the content. If a height is set, and .vertically-centered is on the card, the content will vertically center. Note that the markup has a .card-body class after the header. Markup like this

.card.vertically-centered
  header Card Title
  .card-body Content Here
Card Title
Content Here
Card Title
Card with lots of content. This shows that the content is centered vertically and horizontally, but the text all acts as a single left aligned paragraph.

Placeholder Card

Markup like this

.card.placeholder Content Goes Here
Content Goes Here