React

Card

A card is a flexible element for containing any kind of 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

Copied to clipboard

Card with image and actions

Copied to clipboard

Card header in card head

Copied to clipboard

Only actions in card head (no header/footer)

Copied to clipboard

Only image in the card head

Copied to clipboard
Copied to clipboard

Card with no header

Copied to clipboard

Card with only a content section

Copied to clipboard

Card with multiple body sections

Copied to clipboard

Card with only one body that fills

Copied to clipboard

Card hover example

Copied to clipboard

Card compact example

Copied to clipboard

Props

Card props

The Card component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Card
classNamestring''Additional classes added to the Card
componentReact.ReactNode'article'Sets the base component to render. defaults to article
isHoverablebooleanfalseModifies the card to include hover styles on :hover
isCompactbooleanfalseModifies the card to include compact styling

CardBody props

The CardBody component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Card Body
classNamestring''Additional classes added to the Card Body
componentReact.ReactNode'div'Sets the base component to render. defaults to div
isFilledbooleantrueEnables the body Content to fill the height of the card

CardFooter props

The CardFooter component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Card Footer
classNamestring''Additional classes added to the Footer
componentReact.ReactNode'div'Sets the base component to render. defaults to div

CardHeader props

The CardHeader component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Card Footer
classNamestring''Additional classes added to the Header

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__actions--PaddingLeftc_card__actions_PaddingLeft1rem
--pf-c-card__actions--child--MarginLeftc_card__actions_child_MarginLeft0.5rem
--pf-c-card__body--FontSizec_card__body_FontSize0.875rem
--pf-c-card__footer--FontSizec_card__footer_FontSize0.875rem
--pf-c-card__header--not-last-child--PaddingBottomc_card__header_not_last_child_PaddingBottom0.5rem
--pf-c-card--child--PaddingBottomc_card_child_PaddingBottom1rem
--pf-c-card--child--PaddingLeftc_card_child_PaddingLeft1rem
--pf-c-card--child--PaddingRightc_card_child_PaddingRight1rem
--pf-c-card--first-child--PaddingTopc_card_first_child_PaddingTop1rem
--pf-c-card--m-compact__body--FontSizec_card_m_compact__body_FontSize0.875rem
--pf-c-card--m-compact__footer--FontSizec_card_m_compact__footer_FontSize0.875rem
--pf-c-card--m-compact__header--not-last-child--PaddingBottomc_card_m_compact__header_not_last_child_PaddingBottom0.5rem
--pf-c-card--m-compact--child--PaddingBottomc_card_m_compact_child_PaddingBottom1rem
--pf-c-card--m-compact--child--PaddingLeftc_card_m_compact_child_PaddingLeft1rem
--pf-c-card--m-compact--child--PaddingRightc_card_m_compact_child_PaddingRight1rem
--pf-c-card--m-compact--first-child--PaddingTopc_card_m_compact_first_child_PaddingTop1rem
--pf-c-card--m-hoverable--hover--BoxShadowc_card_m_hoverable_hover_BoxShadow0 0.1875rem 0.4375rem 0.1875rem rgba(3,3,3,.13),0 0.6875rem 1.5rem 1rem rgba(3,3,3,.12)