Cards

Documentation for basic card components, card headers and footers.

Files

app/styles/modules/_cards.scss

Card

A card serves as an entry point to more detailed information. Cards may contain a photo, text, link, list, tables and any other conten. The most basic card can be created by using class .card on element that wraps our content. Content should be then wrapped in element with class .card__content. One card can contain more .card__content elements.

Note

More complex cards can contain also headers and footers.

Example:

Basic card

Lorem ipsum Ullamco ut dolore laborum deserunt Excepteur veniam et Duis nostrud cupidatat dolore qui voluptate et non ex laboris ullamco consequat culpa consequat qui magna qui labore dolore do velit sint.

Card with two contents.

Lorem ipsum Ullamco ut dolore laborum deserunt Excepteur veniam et.

Duis nostrud cupidatat dolore qui voluptate et non ex laboris ullamco consequat culpa consequat qui magna qui labore dolore do velit sint.

Code:
<!-- basic card -->
<article class="card">
  <section class="card__content">
    ...
  </section>
</article>

<!-- card with two contents-->
<article class="card">
  <section class="card__content">
    ...
  </section>
  <section class="card__content">
    ...
  </section>
</article>

Card header

Card header is part of the card component. It can be created by using class .card__header on header element.

Example:

Card with header

Lorem ipsum Ea cillum deserunt do ut eiusmod reprehenderit minim et reprehenderit ea in dolor veniam dolor incididunt dolore dolor fugiat consequat ea qui exercitation proident amet aute id aute culpa esse elit dolor labore voluptate in cillum Ut dolor mollit ad.

Code:
<article class="card">
  <header class="card__header">
    ...
  </header>
  <section class="card__content">
    ...
  </section>
</article>

Header actions

Card header can also contain actions. In that case use .card__header__action and .card__header__title. Actions can contain icons, buttons, dropdowns... You name it!

Note

This is actually a bar component, but it's baked right into card header for the sake of semantic markup and convenience.
Example:

Headline

Lorem ipsum Ea cillum deserunt do ut eiusmod reprehenderit minim et reprehenderit ea in dolor veniam dolor incididunt dolore dolor fugiat consequat ea qui exercitation proident amet aute id aute culpa esse elit dolor labore voluptate in cillum Ut dolor mollit ad.

Code:
<article class="card">
  <header class="card__header">
    <div class="card__header__action">
      ...
    </div>
    <div class="card__header__title">
      ...
    </div>
    <div class="card__header__action">
      ...
    </div>
  </header>
  <section class="card__content">
    ...
  </section>
</article>

Card footer

Card footer is part of the card component. It can be created by using class .card__footer on footer element.

Example:

Card with footer

Lorem ipsum Ullamco ut dolore laborum deserunt Excepteur veniam et Duis nostrud cupidatat dolore qui voluptate et non ex laboris ullamco consequat culpa consequat qui magna qui labore dolore do velit sint.

Code:
<article class="card">
  <section class="card__content">
    ...
  </section>
  <footer class="card__footer">
    ...
  </footer>
</article>