Browse: Home / Block Editor Handbook / Reference Guides / Component Reference / Card

Card Edit

Card provides a flexible and extensible content container.

Usage Usage

Card also provides a convenient set of sub-components such as CardBody, CardHeader, CardFooter, and more (see below).

“`jsx live
import {
Card,
CardHeader,
CardBody,
CardFooter,
Text,
Heading,
} from ‘@wordpress/components’;

function Example() {
return (

Card Title

Card Content

Card Footer

);
}

<br />## Props

### `elevation`: `number`

Size of the elevation shadow, based on the Style system's elevation system. This may be helpful in highlighting certain content. For more information, check out [`Elevation`](https://developer.wordpress.org/block-editor/designers-developers/developers/components/elevation/).

- Required: No
- Default: `0`

### `isBorderless`: `boolean`

Renders without a border.

- Required: No
- Default: `false`

### `isRounded`: `boolean`

Renders with rounded corners.

- Required: No
- Default: `true`

### `size`: `string`

Determines the amount of padding within the component.

- Required: No
- Default: `medium`
- Allowed values: `xSmall`, `small`, `medium`, `large`

### Inherited props

`Card` also inherits all of the [`Surface` props](https://developer.wordpress.org/block-editor/designers-developers/developers/components/ui/surface/#props).

## Sub-Components

This component provides a collection of sub-component that can be used to compose various interfaces.

-   [`<CardBody />`](https://developer.wordpress.org/block-editor/designers-developers/developers/components/card/card-body/)
-   [`<CardDivider />`](https://developer.wordpress.org/block-editor/designers-developers/developers/components/card/card-divider/)
-   [`<CardFooter />`](https://developer.wordpress.org/block-editor/designers-developers/developers/components/card/card-footer/))
-   [`<CardHeader />`](https://developer.wordpress.org/block-editor/designers-developers/developers/components/card/card-header/))
-   [`<CardMedia />`](https://developer.wordpress.org/block-editor/designers-developers/developers/components/card/card-media/))

### Sub-Components Example

```jsx
import {
    Card,
    CardBody,
    CardDivider,
    CardFooter,
    CardHeader,
    CardMedia,
} from '@wordpress/components';

const Example = () => (
    <Card>
        <CardHeader>...</CardHeader>
        <CardBody>...</CardBody>
        <CardDivider />
        <CardBody>...</CardBody>
        <CardMedia>
            <img src="..." />
        </CardMedia>
        <CardHeader>...</CardHeader>
    </Card>
);

Expand full source codeCollapse full source code

Context Context

<Card />‘s sub-components are connected to <Card /> using Context. Certain props like size and isBorderless are passed through to some of the sub-components.

In the following example, the <CardBody /> will render with a size of small:

import { Card, CardBody } from '@wordpress/components';

const Example = () => (
    <Card size="small">
        <CardBody>...</CardBody>
    </Card>
);

These sub-components are designed to be flexible. The Context props can be overridden by the sub-component(s) as required. In the following example, the last <CardBody /> will render it’s specified size:

import { Card, CardBody } from '@wordpress/components';

const Example = () => (
    <Card size="small">
        <CardBody>...</CardBody>
        <CardBody>...</CardBody>
        <CardBody size="large">...</CardBody>
    </Card>
);