@workday/canvas-kit-react-card
TypeScript icon, indicating that this package has built-in type declarations

4.8.1 • Public • Published

Canvas Kit Card

Generic Canvas card component

> Workday Design Reference

Installation

yarn add @workday/canvas-kit-react

or

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

Usage

import Card from '@workday/canvas-kit-react-card';
import {depth, spacing} from '@workday/canvas-kit-react-core';

<Card heading="Title">
  Card contents
</Card>

<Card padding={spacing.l}>
  Card with custom padding
</Card>

<Card depth={depth[1]}>
  Card with custom depth
</Card>

Static Properties

None

Component Props

Required

None

Optional

heading: ReactNode

Heading at the top of the card.

Default: null


headingId: string

Heading ID for accessibility. Useful tie to an aria-labelledby


padding: 0 | CanvasSpacingValue

Padding of the card. Style imported from @workday/canvas-kit-react-core.

Default: spacing.l


depth: CanvasDepthValue

Depth of the card. Style imported from @workday/canvas-kit-react-core.

Default: depth[2]


width: number | string

Width of the card.

Default: null


height: number | string

Height of the card.

Default: null

Package Sidebar

Install

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

Weekly Downloads

3,336

Version

4.8.1

License

Apache-2.0

Unpacked Size

26.8 kB

Total Files

21

Last publish

Collaborators

  • jaclynjessup
  • nicholasboll
  • alanbsmith
  • workday-canvas-kit
  • justin.pante
  • anicholls