Newtonian Physics Mockumentary

    @workday/canvas-kit-css-card

    8.4.5 • Public • Published

    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.

    Mainenance Mode

    > 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>

    Install

    npm i @workday/canvas-kit-css-card

    DownloadsWeekly Downloads

    809

    Version

    8.4.5

    License

    Apache-2.0

    Unpacked Size

    57.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • workday-canvas-kit
    • justin.pante
    • byed
    • anicholls