Card – Automattic Design System

A visually contained surface that groups related content and actions.

Import

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

Props

Name	Type	Description
`className`	`string`	CSS class name to apply to the element.
`style`	`React.CSSProperties`	CSS style to apply to the element.
`render`	`\| ComponentRenderFn< HTMLAttributesWithRef > \| React.ReactElement< Record< string, unknown > >`	Replaces the component’s default HTML element using a given React element, or a function that returns a React element.
`children`	`ReactNode`	The content to be rendered inside the card.

Examples

Default

const Default = () => <Card.Root>(<>
        <Card.Header>
            <Card.Title>Card title</Card.Title>
        </Card.Header>
        <Card.Content>
            <Text>
                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>
                This is the main content area. It can contain any
                elements.
            </Text>
        </Card.Content>
    </>)</Card.Root>;

With Full Bleed

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>
            <Card.Title>Featured image</Card.Title>
        </Card.Header>
        <Card.Content>
            <Card.FullBleed>
                <div
                    style={ {
                        height: 160,
                        background:
                            'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                    } }
                />
            </Card.FullBleed>
            <Text>Content below the full-bleed area.</Text>
        </Card.Content>
    </>)</Card.Root>;

Header Only

A minimal card with only a header.

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

Custom Semantics

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>
            <Card.Title render={ <h2 /> }>Section heading</Card.Title>
        </Card.Header>
        <Card.Content>
            <Text>Semantically meaningful card content.</Text>
        </Card.Content>
    </>)</Card.Root>;