CardFooter Edit

CardFooter renders an optional footer within a Card.

Usage #Usage

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

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

Top ↑

Flex #Flex

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

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

const Example = () => (
    <Card>
        <CardBody>...</CardBody>
        <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

Note: This component is connected to Card‘s Context. The value of the size and isBorderless props is derived from the Card parent component (if there is one). Setting these props directly on this component will override any derived values.

Top ↑

isBorderless: boolean #isBorderless: boolean

Renders without a border.

• Required: No
• Default: false

Top ↑

isShady: boolean #isShady: boolean

Renders with a light gray background color.

• Required: No
• Default: false

Top ↑

justify: CSSProperties[ 'justifyContent' ] #justify: CSSProperties[ 'justifyContent' ]

See the documentation for the justify prop for the Flex component

Top ↑

size: string #size: string

Determines the amount of padding within the component.

• Required: No
• Default: medium
• Allowed values: xSmall, small, medium, large