React

Card

A card is a flexible element for containing any kind on content. Cards are used on dashboards, in data displays (e.g. Card View), or for positioning content on a page.

ExamplesPropsCSS Variables

Examples

Simple card

Header
Body
Copied to clipboard
Header
This card has no footer
Copied to clipboard

Card with no header

This card has no header
Copied to clipboard

Card with only a content section

Body
Copied to clipboard

Card with multiple body sections

Header
Body
Body
Body
Copied to clipboard

Card with only one body that fills

Header
Body pf-m-no-fill
Body pf-m-no-fill
Body
Copied to clipboard

Card hover example

Header
Body
Copied to clipboard

Props

Card Props

The Card component accepts the following props.

NameTypeRequiredDefaultDescription
childrenanynullcontent rendered inside the Card
classNamestring''additional classes added to the Card
componentcustom'article'Sets the base component to render. defaults to article
isHoverableboolfalseModifies the card to include hover styles on :hover
anyAdditional props are spread to the container component

CardBody Props

The CardBody component accepts the following props.

NameTypeRequiredDefaultDescription
childrenanynullcontent rendered inside the Card Body
classNamestring''additional classes added to the Card Body
componentcustom'div'Sets the base component to render. defaults to div
isFilledbooltrueEnables the body Content to fill the height of the card
anyAdditional props are spread to the container component

CardFooter Props

The CardFooter component accepts the following props.

NameTypeRequiredDefaultDescription
childrenanynullcontent rendered inside the Card Footer
classNamestring''additional classes added to the Footer
componentcustom'div'Sets the base component to render. defaults to div
anyAdditional props are spread to the container component

CardHeader Props

The CardHeader component accepts the following props.

NameTypeRequiredDefaultDescription
childrenanynull
classNamestring''
any

CSS Variables

--pf-c-card--BackgroundColorc_card_BackgroundColorrgba(3,3,3,.32)
--pf-c-card--BoxShadowc_card_BoxShadow0 0.0625rem 0.125rem 0 rgba(3,3,3,.2)
--pf-c-card__header--not-last-child--PaddingBottomc_card__header_not_last_child_PaddingBottom1rem
--pf-c-card--child--PaddingBottomc_card_child_PaddingBottom1.5rem
--pf-c-card--child--PaddingLeftc_card_child_PaddingLeft1.5rem
--pf-c-card--child--PaddingRightc_card_child_PaddingRight1.5rem
--pf-c-card--first-child--PaddingTopc_card_first_child_PaddingTop1.5rem