@workday/canvas-kit-docs/dist/mdx/react/card/card.mdx

Documentation components of Canvas Kit components

import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
import Basic from './examples/Basic';
import Borderless from './examples/Borderless';
import Filled from './examples/Filled';
import WithCustomStyles from './examples/CustomStyles';
import WithStencils from './examples/Stencils';


# Canvas Kit Card

A Card is a preview that serves as an entry point to more detailed information. Card is a
presentational [compound component](/get-started/for-developers/documentation/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 component and `Card.Body` and `Card.Heading` subcomponents.

<ExampleCodeBlock code={Basic} />

### Borderless Example

The `borderless` variant removes the border from the Card, creating a cleaner appearance while
maintaining the same internal spacing and structure. Use this variant when placing cards on colored
backgrounds where you want the card to blend seamlessly without borders or shadows.

<ExampleCodeBlock code={Borderless} />

### Filled Example

The `filled` variant adds a background color to the Card, creating a more prominent appearance while
maintaining the same internal spacing and structure. Use this variant when you need a card with a
grayish background to create visual separation from the page background.

<ExampleCodeBlock code={Filled} />

### Custom Styles

Card and its subcomponents support custom styling via the `cs` prop. For more information, check our
["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).

<ExampleCodeBlock code={WithCustomStyles} />

## Stencils

You can also use `Card` stencils to extend styles for your own custom components. This allows you to
compose styles without using components directly. In the example below, we're extending `Card`
stencils to create a custom `MenuCard` component.

Here's an example of a `Card` with a reduced padding of `x3` (`0.75rem` or `12px`).

<ExampleCodeBlock code={WithStencils} />

## Component API

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