CardFooter Edit

CardFooter renders an optional footer within a <Card />.

Usage Usage

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

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

Flex Flex

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

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

const Example = () => (
    <Card>
        <CardFooter>
            <FlexBlock>Content</FlexBlock>
            <FlexItem>
                <Button>Action</Button>
            </FlexItem>
        </CardFooter>
    </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.