CardHeader Edit

CardHeader renders an optional header within a <Card />.

Usage Usage

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

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

Flex Flex

Underneath, CardHeader uses the layout component <Flex/>. This improves the alignment of child items within the component.

import {
    Button,
    Card,
    CardHeader,
    FlexItem,
    FlexBlock,
} from '@wordpress/components';

const Example = () => (
    <Card>
        <CardHeader>
            <FlexBlock>Content</FlexBlock>
            <FlexItem>
                <Button>Action</Button>
            </FlexItem>
        </CardHeader>
    </Card>
);

Check out the documentation on <Flex/> for more details on layout composition.

Top ↑

Props Props

Top ↑

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 ↑

isShady isShady

Renders with a light gray background color.

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

Top ↑

size size

Determines the amount of padding within the component.

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

Note: This component is connected to <Card />‘s Context. Passing props directly to this component will override the props derived from context.