2.2 molecules.cards Cards

Toggle example guides Toggle HTML markup

A card is a flexible and extensible content container/block. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Examples
Default styling

With supporting text below as a natural lead-in to additional content.

.card-primary
Changes background to primary color.

With supporting text below as a natural lead-in to additional content.

.card-success
Changes background to success color.

With supporting text below as a natural lead-in to additional content.

.card-info
Changes background to info color.

With supporting text below as a natural lead-in to additional content.

.card-warning
Changes background to warning color.

With supporting text below as a natural lead-in to additional content.

.card-danger
Changes background to danger color.

With supporting text below as a natural lead-in to additional content.

.card-nobg
A card without background color.

With supporting text below as a natural lead-in to additional content.

.bg-white
Changes background to a white color.

With supporting text below as a natural lead-in to additional content.

.card-button
Changes the interaction when a card is clickable.

With supporting text below as a natural lead-in to additional content.

Markup: components/molecules/cards/cards.twig
  <div class="card  [modifier class] ">
  <div class="card-content">
    <div class="card-media"></div>    <div class="card-body ">
              <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          </div>
  </div>
    </div>
Source: components/molecules/cards/_cards.scss, line 1