Cards

Base

Cards grow horizontally by default to fill the width of their container. The .joy-card element has 4 possible children:

.joy-card__body
.joy-card__header
.joy-card__footer
.joy-card__image

The header, footer, and image elements are all optional, but .joy-card__body should always be used when creating even the simplest of cards.

Card body. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="joy-card">
  <div class="joy-card__header">
    <div class="joy-text-heading--label">
      Card header
    </div>
  </div>
  <div class="joy-card__body">
    Card body. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="joy-card__footer">
    Card footer
  </div>
</div>

Group several cards together by wrapping them in a .joy-cards container. The cards container turn the cards into flex elements so that all the cards remain the same height.

We recommend that a single .joy-cards container should contain no more than 4 cards.

Lorem ipsum dolor sit amet.

Hello, I'm a longer card with no header or footer. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet.

<div class="joy-cards">
  <div class="joy-card">
    <div class="joy-card__header">
      <div class="joy-text-heading--label">
        Card header
      </div>
      <button class="joy-button joy-button--flat">
        <i class="fa fa-ellipsis-v"></i>
      </button>
    </div>
    <div class="joy-card__body">
      Lorem ipsum dolor sit amet.
    </div>
    <div class="joy-card__footer">
      <button class="joy-button joy-button--small joy-button--flat">
        Cancel
      </button>
      <button class="joy-button joy-button--small">
        Save
      </button>
    </div>
  </div>
  <div class="joy-card">
    <div class="joy-card__body">
      Hello, I'm a longer card with no header or footer. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <div class="joy-card">
    <div class="joy-card__header">
      <div class="joy-text-heading--label">
        Card header
      </div>
      <button class="joy-button joy-button--flat">
        <i class="fa fa-ellipsis-v"></i>
      </button>
    </div>
    <div class="joy-card__body">
      Lorem ipsum dolor sit amet.
    </div>
    <div class="joy-card__footer">
      <button class="joy-button joy-button--small joy-button--flat">
        Cancel
      </button>
      <button class="joy-button joy-button--small">
        Save
      </button>
    </div>
  </div>
</div>

Images

Use images in your cards with .joy-card__image element. Images will fill the width of their container card and do not include any horizontal padding.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="joy-cards joy-m-vertical--large">
  <div class="joy-card">
    <div class="joy-card__image">
      <img src="/images/titanfall-key-art.jpg" alt="Photo">
    </div>
    <div class="joy-card__body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="joy-card">
    <div class="joy-card__header">
      <div class="joy-text-heading--label">
        Card header
      </div>
      <button class="joy-button joy-button--flat">
        <i class="fa fa-ellipsis-v"></i>
      </button>
    </div>
    <div class="joy-card__image">
      <img src="/images/titanfall-key-art.jpg" alt="Photo">
    </div>
    <div class="joy-card__footer">
      <button class="joy-button joy-button--small joy-button--flat">
        Cancel
      </button>
      <button class="joy-button joy-button--small">
        Save
      </button>
    </div>
  </div>
  <div class="joy-card">
    <div class="joy-card__body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="joy-card__image">
      <img src="/images/titanfall-key-art.jpg" alt="Photo">
    </div>
  </div>
</div>

Color Mixin

If you need a custom card color, you can use the card-color Sass mixin for creating a colored card.

The source for the mixin looks like this:

@mixin card-color(
  $mx-bkgd: $white,
  $mx-text: $color-text-default
) {
  background-color: $mx-bkgd;
  color: $mx-text;
}

To use it, simply create a class in your project's Sass files (assuming you have imported Joystick).

.custom-card--berry {
  @include card-color($berry, $white);
}
.custom-card--sky {
  @include card-color($sky, $white);
}
.custom-card--raspberry {
  @include card-color($raspberry, $white);
}

And then just apply your custom class to the base .joy-card class.

Hello, I'm a card.

Hello, I'm a longer card. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Hello, I'm a card.

<div class="joy-cards">
  <div class="joy-card custom-card--berry">
    <div class="joy-card__body">
      Hello, I'm a card.
    </div>
  </div>
  <div class="joy-card custom-card--sky">
    <div class="joy-card__body">
        Hello, I'm a longer card.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  <div class="joy-card custom-card--raspberry">
    <div class="joy-card__body">
      Hello, I'm a card.
    </div>
  </div>
</div>

Cards

Use cards to apply a container around a related grouping of information.

Base

Cards

Images

Color Mixin