Version: 1.0.x

Card

Cards are made to be flexible, for example to be used with or without some children elements, and with different orders.

Add some text inside the card.
ok more text here.

Add some text inside the card.

Add some text inside the card.

Photo by dirk von loen-wagner on Unsplash

<div class="c-card">
  <div class="c-card__img"><!-- can be moved from the first to the last position -->
    <img src="..." alt="...">
  </div>
  <div class="c-card__header">
    <div class="c-card__title u-h5 u-mb-0">Card title</div>
  </div>
  <div class="c-card__body">
    <span>Add some text inside the card.</span>
  </div>
  <div class="c-card__footer">
    <a class="c-button c-button--primary" href="#">Action</a>
  </div>
</div>

The class .c-cards is also available to make the height identical for each card in the same row.

A tiny card

With more text than the other

Step variant

With sample text and a action button below

<div className="c-card" data-step="1">
  <div className="c-card__header">
    <div className="c-card__title u-h5 u-mb-0">A simple card</div>
  </div>
  <div className="c-card__body">With sample text and a action button below</div>
  <div className="c-card__footer">
    <a className="c-button c-button--primary" href="#">Action</a>
  </div>
</div>

Step variant​

Step variant