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