Card Edit

Card provides a flexible and extensible content container.

Usage #Usage

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

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

Top ↑

Props #Props

isBorderless #isBorderless

Determines the border style of the card.

• Type: Boolean
• Required: No
• Default: false

Top ↑

isElevated #isElevated

Determines the elevation style of the card.

• Type: Boolean
• Required: No
• Default: false

Top ↑

size #size

Determines the amount of padding within the component.

• Type: String
• Required: No
• Default: medium

Top ↑

Sub-Components #Sub-Components

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

• <CardBody />
• <CardDivider />
• <CardFooter />
• <CardHeader />
• <CardMedia />

Top ↑

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

Top ↑

Context #Context

<Card />‘s sub-components are connected to <Card /> using Context. Certain props like size and variant are passed through to 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>
);