Card

The cards component provide a flexible and extensible content container with multiple variants and options.

.card

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">
    ...
  </div>
</div>

.card_tall .card_zoom .card_fade

.card_step

.card__screen + .card__background

<div class="card">
  <div class="card__body">
    ...
  </div>
  <img src="..." class="card__background" />
  <div class="card__screen"></div>
</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>

Examples

Below are a few examples of different ways to build a card.

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.