3.4 atoms.card Card

Toggle example guides Toggle HTML markup

The card is a very basic element that we see a lot in Open social. It is the most basic way of structuring content into sections. A card is elevated (through box-shadow property) one level from the canvas. It will also have a background-color and border-radius.

Card title

A card can have a title to display what the card is about. Add .card__title--underline for a border on the head. Add a child <div class="card__subtitle"> for a subtitle.

Card block

The default way of structuring content in a card is by placing it in a .card__block.

Card body

Add .card__body to double the padding of the card. This is primarily used for articles.

Card actionbar

The actionbar is reserved for actions the user can perform in the card. In most cases there will be buttons, but there can also be badges in here.

Examples
.card__block
Card block

Card title optional subtitle

Content can be anything

.card__body
Card body

Card title optional subtitle

Content can be anything

Markup: 02-atoms/cards/card.twig
<section class="card">
  <h2 class="card__title card__title--underline">
    Card title
    <span class="card__subtitle">
      optional subtitle
    </span>
  </h2>
  <div class="{{ modifier_class }}">
    <p>Content can be anything</p>
  </div>

  <footer class="card__actionbar">
    <a href="#" class="card__link"> Read more </a>
  </footer>

</section>
Source: 02-atoms/cards/cards.scss, line 1