Cards

Version: 0.9.0

Edit

A card is a defined surface, separate from the page, on a single topic that is easy to scan for relevant information. It must meet defined content restrictions and is displayed with specific styling for proper background color, margins, and padding. Greater emphasis to the card can be acheived by utilizing the raised card option.

A basic card consists of a headline (1-2 lines), text (2-3 sentences), and call to action in a stacked orientation. There is an optional section for media that can bleed to the edges of the card or remain inset and inline with the content below.

Card

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/cards.scss#L24

Card Title

Card copy. Ham bacon tempor eiusmod laboris salami sausage.

Button Link

<!-- default card -->
<ul>
  <li class="c-card">
    <div class="c-card__content">
      <h2 class="c-card__title">Card Title</h2>
      <p class="c-card__copy">Card copy. Ham bacon tempor eiusmod laboris salami sausage.</p>
      <p class="c-card__copy"><a class="c-button" href="#">Button Link</a></p>
    </div>
  </li>
</ul>

Card with Media

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/cards.scss#L66

Card Title

Card copy. Ham bacon tempor eiusmod laboris salami sausage.

Button Link

<!-- card with full-bleed media -->
<!-- For full-bleed media, card media and card content should be siblings. -->
<ul>
  <li class="c-card">
    <div class="c-card__media">
      <img src="https://picsum.photos/480/240" alt="" />
    </div>
    <div class="c-card__content">
      <h2 class="c-card__title">Card Title</h2>
      <p class="c-card__copy">Card copy. Ham bacon tempor eiusmod laboris salami sausage.</p>
      <p class="c-card__copy"><a class="c-button" href="#">Button Link</a></p>
    </div>
  </li>
</ul>

Card with Inset Media

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/cards.scss#L88

Card Title

Card copy. Ham bacon tempor eiusmod laboris salami sausage.
Button Link

<!-- card with inset media -->
<!-- For a card with inset media, card media should be a child of card content. -->
<ul>
  <li class="c-card">
    <div class="c-card__content">
      <div class="c-card__media">
        <img src="https://picsum.photos/480/240" alt="" />
      </div>
      <div class="c-card__body">
        <h2 class="c-card__title">Card Title</h2>
        <p class="c-card__copy">Card copy. Ham bacon tempor eiusmod laboris salami sausage.</>
        <p class="c-card__copy"><a class="c-button" href="#">Button Link</a></p>
      </div>
    </div>
  </li>
</ul>

Raised Card

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/cards.scss#L116

Card Title

Card copy. Ham bacon tempor eiusmod laboris salami sausage.
Button Link

<!-- raised card -->
<ul>
  <li class="c-card c-card--raised">
    <div class="c-card__content">
      <h2 class="c-card__title">Card Title</h2>
      <p class="c-card__copy">Card copy. Ham bacon tempor eiusmod laboris salami sausage.</>
      <p class="c-card__copy"><a class="c-button" href="#">Button Link</a></p>
    </div>
  </li>
</ul>

Tight Card

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/cards.scss#L136

Card Title

Card copy. Ham bacon tempor eiusmod laboris salami sausage.
Button Link

<!-- tight card -->
<ul>
  <li class="c-card c-card--tight">
    <div class="c-card__content">
      <h2 class="c-card__title">Card Title</h2>
      <p class="c-card__copy">Card copy. Ham bacon tempor eiusmod laboris salami sausage.</>
      <p class="c-card__copy"><a class="c-button" href="#">Button Link</a></p>
    </div>
  </li>
</ul>