---
name: Card
package: '@wordpress/ui'
category: '@wordpress-ui'
status: stable
canonical: 'https://system.automattic.design/components/card/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-card--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/ui/src/card'
---

# Card

A visually contained surface that groups related content and actions.

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

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |


## Examples

### Default

```tsx
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 Only

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

```tsx
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 Header

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.

```tsx
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 Bleed

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

```tsx
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 Only

A minimal card with only a header.

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

### Full Bleed Hero With Title

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.

```tsx
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 Only

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.

```tsx
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 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>`.

```tsx
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>;
```