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).
import { Card, CardHeader, CardBody, CardFooter, __experimentalText as Text, __experimentalHeading as Heading, } from '@wordpress/components'; function Example() { return ( <Card> <CardHeader> <Heading size={ 4 }>Card Title</Heading> </CardHeader> <CardBody> <Text>Card Content</Text> </CardBody> <CardFooter> <Text>Card Footer</Text> </CardFooter> </Card> ); }
Props Props
elevation
: number
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
.
- Required: No
- Default:
0
isBorderless
: boolean
isBorderless
: boolean
Renders without a border.
- Required: No
- Default:
false
isRounded
: boolean
isRounded
: boolean
Renders with rounded corners.
- Required: No
- Default:
true
size
: string
size
: string
Determines the amount of padding within the component.
- Required: No
- Default:
medium
- Allowed values:
xSmall
,small
,medium
,large
Inherited props Inherited props
Card
also inherits all of the Surface
props.
Sub-Components Sub-Components
This component provides a collection of sub-component that can be used to compose various interfaces.
Sub-Components Example Sub-Components Example
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> );