Card

The cards component provides a flexible and extensive content container with multiple variants and options.

card

The base card component comes with a number of elements for card composition. The three most basic being:

  • card__body
  • card__image
  • card__title

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

<div class="card">
  <img class="card__image" src="..." />
  <div class="card__body">
    <h3 class="card__title">...</h3>
    ...
  </div>
</div>

card__header + card__footer

These are used for when you need separated card headers and footers.

  • card__header
  • card__footer

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

<div class="card">
  <div class="card__header">
    <h3 class="card__title">...</h3>
  </div>
  <div class="card__body">
    ...
  </div>
  <div class="card__footer">
    ...
  </div>
</div>

card__screen + card__background

Card screens and backgrounds are displayed behind the other card elements. These are typically paired with .card_invert which switches text colors to better suite a dark background.

  • card__screen
  • card__background

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

<div class="card card_invert">
  <div class="card__body">
    ...
  </div>
  <img src="..." class="card__background" />
  <div class="card__screen"></div>
</div>

Card modifiers

There are a number of card modifiers that can help with your card compositions.

card_invert

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

<div class="card card_invert">
  <div class="card__header">
    <h3 class="card__title">...</h3>
  </div>
  <div class="card__body">
    ...
  </div>
  <div class="card__footer">
    ...
  </div>
</div>

card_tall

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

<div class="card card_tall">
  ...
</div>

card_size_[value]

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

<div class="card card_size_lg">
  ...
</div>

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

<div class="card card_size_xl">
  ...
</div>

These are modifiers that enhance linked cards. These change how the card looks when it’s hovered or focused. These can be mixed and matched with each other as needed.

card_lift

card_step

card_fade

<div class="card card_fade">
  ...
  <img src="..." class="card__background">
  <div class="card__screen"></div>
</div>

card_zoom

<div class="card card_zoom">
  ...
  <img src="..." class="card__background">
  <div class="card__screen"></div>
</div>

card_link

This modifier expands from the set link modifiers above based on the set in the $card-link-extend variable map who’s default contains:

  • card_lift
  • card_zoom
<div class="card card_link">
  ...
  <img src="..." class="card__background">
  <div class="card__screen"></div>
</div>

Card theme modifiers

Below are a few examples of different ways to build a card using various card elements and modifiers.

Available themes:

  • card_theme_dark
  • card_theme_shade
  • card_theme_bordered

card_theme_[key]

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

<div class="card card_theme_dark">...</div>
<div class="card card_theme_shade">...</div>
<div class="card card_theme_bordered">...</div>

Card examples

Below are a few examples of different ways to build a card using various card elements and modifiers.

card_tall card_fade card_zoom

card_link

card_link card_step

Demos

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.