@workday/canvas-kit-css-card

Canvas Kit Card

A card is a flexible and extensible content container that includes options for positioning. The card content includes classes for heading and body.

> Workday Design Reference

Installation

yarn add @workday/canvas-kit-css

or

yarn add @workday/canvas-kit-css-card

Add your node_modules directory to your SASS includePaths. You will then be able to import index.scss.

@import '~@workday/canvas-kit-css-card/index.scss';

Usage

Card sizes follow the 12 column grid system. To adjust sizes append the size modifier to the .wdc-card-{size} class. For the tablet breakpoint, columns double if less than 50% or round up to 100% if greater than 50%. On mobile all card sizes increase to 100%.

Card Sizes

<div class="wdc-card-container">
  <div class="wdc-card-4">
    <h3 class="wdc-card-heading">
      Card Header
    </h3>
    <div class="wdc-card-body">
      .wdc-card-4
    </div>
  </div>
  <div class="wdc-card-4">
    <h3 class="wdc-card-heading">
      Card Header
    </h3>
    <div class="wdc-card-body">
      .wdc-card-4
    </div>
  </div>
  <div class="wdc-card-4">
    <h3 class="wdc-card-heading">
      Card Header
    </h3>
    <div class="wdc-card-body">
      .wdc-card-4
    </div>
  </div>
</div>

Variants

Card with No Padding

Card padding may be removed by add the .wdc-card-no-padding modifier.

<div class="wdc-card-container">
  <div class="wdc-card-6 wdc-card-no-padding">
    <h3 class="wdc-card-heading">
      Card Header
    </h3>
    <div class="wdc-card-body">
      .wdc-card-6.wdc-card-no-padding
    </div>
  </div>
  <div class="wdc-card-6">
    <h3 class="wdc-card-heading">
      Card Header
    </h3>
    <div class="wdc-card-body">
      .wdc-card-6
    </div>
  </div>
</div>

Card Positioning

Card positioning can be changed by adding a modifier to the container class, .wdc-card-container-{position}. Positioning options are: start, end, center, between, around. These modifiers apply flex positioning to the cards.

<div class="wdc-card-container wdc-card-container-space-around">
  <div class="wdc-card-2">
    <h3 class="wdc-card-heading">
      Card Header
    </h3>
    <div class="wdc-card-body">
      .wdc-card-container .wdc-card-container-space-around
    </div>
  </div>
</div>

Card Depth

Depth 2 is the default. You can use the depth classes in @workday/canvas-kit-css-core to set a custom depth for your card.

HTML

<div class="wdc-card-container">
  <div class="wdc-card wdc-depth-3">
    <h3 class="wdc-card-heading">Card Header</h3>
    <div class="wdc-card-body">.wdc-depth-3</div>
  </div>
  <div class="wdc-card-3 wdc-depth-4">
    <h3 class="wdc-card-heading">Card Header</h3>
    <div class="wdc-card-body">.wdc-depth-4</div>
  </div>
</div>