Automattic Design System

Components

Card

A visually contained surface that groups related content and actions.

import { Card } from '@wordpress/ui';

View on Storybook

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
children

ReactNode

The content to be rendered inside the card.

className

string

CSS class name to apply to the element.

style

CSSProperties

CSS style to apply to the element.

render

ComponentRenderFn<HTMLAttributesWithRef<any>> | ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>> | undefined

Replaces the component’s default HTML element using a given React element, or a function that returns a React element.

ExamplesPermalink to this section

DefaultPermalink to this section

const Default = () => <Card.Root>{[
        <Card.Header key="header">
            <Card.Title>Card title</Card.Title>
        </Card.Header>,
        <Card.Content key="content">
            <Text render={ <p /> }>
                This is the main content area. It can contain any elements.
                This is the main content area. It can contain any elements.
                This is the main content area. It can contain any elements.
                This is the main content area. It can contain any elements.
                This is the main content area. It can contain any elements.
                This is the main content area. It can contain any elements.
            </Text>
            <Text render={ <p /> }>
                This is the main content area. It can contain any elements.
            </Text>
        </Card.Content>,
    ]}</Card.Root>;

Full Bleed Cover OnlyPermalink to this section

Card.FullBleed as the sole child of Card.Content spans edge-to-edge with no padding around it.

const FullBleedCoverOnly = () => <Card.Root>(<Card.Content>
        <Card.FullBleed>
            <div
                style={ {
                    height: 180,
                    background:
                        'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
                } }
            />
        </Card.FullBleed>
    </Card.Content>)</Card.Root>;

Full Bleed Cover With HeaderPermalink to this section

When Card.FullBleed is the sole child of Card.Content and a Card.Header sits above it, the image bumps against the card’s side and bottom edges while the header retains its normal padding.

const FullBleedCoverWithHeader = () => <Card.Root>{[
        <Card.Header key="header">
            <Card.Title>Card title</Card.Title>
        </Card.Header>,
        <Card.Content key="content">
            <Card.FullBleed>
                <div
                    style={ {
                        height: 180,
                        background:
                            'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
                    } }
                />
            </Card.FullBleed>
        </Card.Content>,
    ]}</Card.Root>;

With Full BleedPermalink to this section

Card.FullBleed breaks out of the card’s padding to span edge-to-edge. Useful for images, dividers, or embedded content.

const WithFullBleed = () => <Card.Root>{[
        <Card.Header key="header">
            <Card.Title>Featured image</Card.Title>
        </Card.Header>,
        <Card.Content
            key="content"
            render={ <Stack direction="column" gap="lg" /> }
        >
            <Card.FullBleed>
                <div
                    style={ {
                        height: 160,
                        background:
                            'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                    } }
                />
            </Card.FullBleed>
            <Text render={ <p /> }>Content below the full-bleed area.</Text>
        </Card.Content>,
    ]}</Card.Root>;

Header OnlyPermalink to this section

A minimal card with only a header.

const HeaderOnly = () => <Card.Root>(<Card.Header>
        <Card.Title>Simple card</Card.Title>
    </Card.Header>)</Card.Root>;

Full Bleed Hero With TitlePermalink to this section

When Card.FullBleed is the first child of Card.Header, it extends flush to the card’s top and side edges — ideal for hero images. Content that follows inside the header is padded normally.

const FullBleedHeroWithTitle = () => <Card.Root>{[
        <Card.Header
            key="header"
            render={ <Stack direction="column" gap="lg" /> }
        >
            <Card.FullBleed>
                <div
                    style={ {
                        height: 180,
                        background:
                            'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
                    } }
                />
            </Card.FullBleed>
            <Card.Title>Hero image card</Card.Title>
        </Card.Header>,
        <Card.Content key="content">
            <Text render={ <p /> }>
                The image above bleeds to the card&apos;s top and side
                edges.
            </Text>
        </Card.Content>,
    ]}</Card.Root>;

Full Bleed Hero OnlyPermalink to this section

When Card.FullBleed is the only child of Card.Header, it fills the header entirely — top and sides flush to the card edges, no extra padding below.

const FullBleedHeroOnly = () => <Card.Root>{[
        <Card.Header key="header">
            <Card.FullBleed>
                <div
                    style={ {
                        height: 180,
                        background:
                            'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
                    } }
                />
            </Card.FullBleed>
        </Card.Header>,
        <Card.Content key="content">
            <Text render={ <p /> }>
                The image above bleeds to the card&apos;s top and side
                edges.
            </Text>
        </Card.Content>,
    ]}</Card.Root>;

Custom SemanticsPermalink to this section

Use the render prop to change the underlying HTML elements for better semantics. Here, Card.Root renders as a <section> and Card.Title renders as an <h2>.

const CustomSemantics = () => <Card.Root render={<section />}>{[
        <Card.Header key="header">
            <Card.Title render={ <h2 /> }>Section heading</Card.Title>
        </Card.Header>,
        <Card.Content key="content">
            <Text render={ <p /> }>
                Semantically meaningful card content.
            </Text>
        </Card.Content>,
    ]}</Card.Root>;