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 air

In case you need to create huge white-space around card contents, you can use additional class .card-air on .card element.

Example:

Basic card

Code:

<!-- card air -->
<article class="card card-air">
  <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 sections

Card header can be also split into two sections. In that case use additional class .card_header-split. Then you can use classes like .card_header_primary and .card_header_secondary on inner elements.

Example:

Headline

Code:

<article class="card">
  <header class="card_header card_header-split">
    <div class="card_header_primary">
      ...
    </div>
    <div class="card_header_secondary">
      ...
    </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

Code:

<article class="card">
  <section class="card_content">
    ...
  </section>
  <footer class="card_footer">
    ...
  </footer>
</article>

Rating card

See example below. For more details about rating picker click here.

Example:

How satisfied are you with your service?

Code:

<div class="card card--rating">
  <div class="card_content card_content--rating">
    <div class="text-center mrg-15-bottom">How satisfied are you with your service?</div>
    <div class="d-flex flex-justify-center">
      <div class="rating-picker">
        <a class="rating-picker__item" href="javascript:;">
          <div class="rating-picker__item-image rating-picker__item-image--1"></div>
          <div class="rating-picker__item-description">Trash</div>
        </a>
        <a class="rating-picker__item" href="javascript:;">
          <div class="rating-picker__item-image rating-picker__item-image--2"></div>
          <div class="rating-picker__item-description">Bad</div>
        </a>
        <a class="rating-picker__item" href="javascript:;">
          <div class="rating-picker__item-image rating-picker__item-image--3"></div>
          <div class="rating-picker__item-description">Okay</div>
        </a>
        <a class="rating-picker__item" href="javascript:;">
          <div class="rating-picker__item-image rating-picker__item-image--4"></div>
          <div class="rating-picker__item-description">Satisfied</div>
        </a>
        <a class="rating-picker__item" href="javascript:;">
          <div class="rating-picker__item-image rating-picker__item-image--5"></div>
          <div class="rating-picker__item-description">Excellent</div>
        </a>
      </div>
    </div>
  </div>
</div>