import {SymbolDoc} from '@workday/canvas-kit-docs';

import {Card} from '@workday/canvas-kit-react/card';

import Basic from './examples/Basic';
import Depth from './examples/Depth';
import Padding from './examples/Padding';


# Canvas Kit Card

A Card is a preview that serves as an entry point to more detailed information. Card is a
presentational [compound component](/getting-started/for-developers/resources/compound-components/)
used as a building block for other components such as [Popup](/components/popups/popup/) and
[Modal](/components/popups/modal/).

[> Workday Design Reference](https://design.workday.com/components/containers/cards)

## Installation

```sh
yarn add @workday/canvas-kit-react
```

## Usage

### Basic Example

Card includes a container `Card` component and the following subcomponents: `Card.Body` and
`Card.Heading`.

<ExampleCodeBlock code={Basic} />

### Depth

`Card` extends from `Box` so it supports all of
[Box's style props](/components/layout/box/#style-props). This includes `depth`, which changes the
Card's perceived "height" above the page surface by adjusting its box shadow. `Card` has a default
depth of `1`.

Here's an example of a `Card` with a increased `depth` of `2`.

<ExampleCodeBlock code={Depth} />

### Padding

Set the `padding` prop of the `Card` (again, supported via `Box`) to adjust its padding. Card has a
default padding of `l`.

Here's an example of a `Card` with a reduced padding of `xs`.

<ExampleCodeBlock code={Padding} />

## Component API

<SymbolDoc name="Card" fileName="/react/" />