Card - Astridd

Overview

Cards provide a flexible and extensible content container with multiple variants and options.

Media

Each card also has the option of having either an image or an animated icon. Examples below.

Colour

Cards can have a darker variation by adding the helper class .bg-storm-100. This applies a dark background you'll also need to add the class .fg-light to change the copy to white with an alternate yellow link; .link-advanced--yellow.

Examples

Vertical variation

Card heading

This is some content which relates to the card. This is some content which relates to the card.

Call to action

<div class="card card--vertical card--center" data-myob-icon-animation data-duration="1100">
  <div class="card__icon">
    <svg viewbox="0 0 36 36" class="stats-fraction" xmlns="http://www.w3.org/2000/svg">
      <title>Fraction</title>
      <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
      <path class="circle" stroke-dasharray="60, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
      <text class="text" x="50%" y="60%" text-anchor="middle">
        <tspan x="37.5%" class="text__update">6</tspan>
        <tspan x="62.5%">/10</tspan>
      </text>
    </svg>
  </div>
  <div class="card__content">
    <div class="card__head">
      <h6>Card heading</h6>
    </div>
    <div class="card__body">
      <p>This is some content which relates to the card. This is some content which relates to the card.</p>
      <a href="" class="link-advanced">Call to action</a>
    </div>
  </div>
</div>

Horizontal variation

Card heading

This is some content which relates to the card. This is some content which relates to the card.

Call to action

<div class="card card--horizontal card--center">
  <div class="card__bg-img">
    <div class="card__img" style="background-image: url(http://placehold.it/807x380.jpg);" data-interchange="[http://placehold.it/807x380.png]"></div>
  </div>
  <div class="card__content">
    <div class="card__head">
      <h6>Card heading</h6>
    </div>
    <div class="card__body">
      <p>This is some content which relates to the card. This is some content which relates to the card.</p>
      <a href="" class="link-advanced">Call to action</a>
    </div>
  </div>
</div>

Link variation

Card heading

June 26, 2017 | By Anonymous

This is some content which relates to the card. This is some content which relates to the card.

<a href="" class="card card--center card--vertical" target="_blank" rel="noopener">
  <div class="card__fg-img">
    <img src="/assets/img/card-lady-on-laptop-desk.jpg" class="card__img" data-interchange="[/assets/img/card-lady-on-laptop-desk.png]" data-myob-image alt="">
  </div>
  <div class="card__content">
    <div class="card__head">
      <h4>Card heading</h4>
    </div>
    <div class="card__body fg-storm-100">
      <h6 class="date">
        <small>
          <time class="show-for-large">June 26, 2017</time>
          <span class="show-for-large"> | </span>
          <span>By Anonymous</span>
        </small>
      </h6>
      <p>This is some content which relates to the card. This is some content which relates to the card.</p>
    </div>
  </div>
</a>

Usage guidelines

Dos	Donts
Do make sure any images or icons included add context and clarity to your message.	Don't have too much copy inside the card, making its height undesirable.
	Don't mix and match orientation, alignment or colour in one viewable area.
	If using the <a> variation to make the entire card a link, don't include further nested links.

Implementation guidelines

Name	Class	Description
Background colour	`.bg-storm-100`	Apply a background colour.
Foreground colour	`.fg-white`	Apply a white foreground colour. Must be used in conjunction with the dark background.
Orientation	`.card--vertical` `.card--horizontal`	Change the placement of child elements within the Card. Horizontal elements display inline while Vertical elements display stacked.
Alignment	`.card--left` `.card--center` `.card--right`	Change Card alignment within their container.
Text Alignment	`.card__text-center`	Centre align body copy.
Media type	`.card__fg-img` `.card__bg-img` `.card__icon`	Display an optional media element within the Card. Should be placed as the first child within the `.card` element. See code examples for implementation.