Card

Since v1.0.0

View source

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

Card title

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

Card title

Add some text inside the card.

Card title

Add some text inside the card.

Card title

Add some text inside the card.

<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

A simple card

With more text than the other

Action

Step variant

A simple card

With sample text and a action button below

Action

Another card

With sample text and a action button below

Action 2

<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>