Package Exports

@workday/canvas-kit-css-card
@workday/canvas-kit-css-card/dist/canvas-kit-css-card.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@workday/canvas-kit-css-card) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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>