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

Basic

Header
Body

With image and actions

Header
Body

Card header in card head

This is a really really really really really really really really really really long header
Body

Only actions in card head (no header/footer)

This is the card body, there is only actions in the card head.

Only image in the card head

Header
Body

With no header

This card has no header

With only a content section

Body

With multiple body sections

Header
Body
Body
Body

With only one body that fills

Header
Body pf-m-no-fill
Body pf-m-no-fill
Body

Hover

Header
Body

Compact

Header
Body

Props

Card properties
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
CardHeader properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Card Footer
classNamestring''Additional classes added to the Header
CardBody properties
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 properties
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

CSS Variables

--pf-c-card__actions--child--MarginLeftc_card__actions_child_MarginLeft
0.5rem
--pf-c-card__actions--PaddingLeftc_card__actions_PaddingLeft
1rem
--pf-c-card__body--FontSizec_card__body_FontSize
0.875rem
--pf-c-card__footer--FontSizec_card__footer_FontSize
0.875rem
--pf-c-card__header--not-last-child--PaddingBottomc_card__header_not_last_child_PaddingBottom
0.5rem
--pf-c-card--BackgroundColorc_card_BackgroundColor
#fff
--pf-c-card--BoxShadowc_card_BoxShadow
0 0.0625rem 0.125rem 0 rgba(3,3,3,0.2)
--pf-c-card--child--PaddingBottomc_card_child_PaddingBottom
1rem
--pf-c-card--child--PaddingLeftc_card_child_PaddingLeft
1rem
--pf-c-card--child--PaddingRightc_card_child_PaddingRight
1rem
--pf-c-card--first-child--PaddingTopc_card_first_child_PaddingTop
1rem
--pf-c-card--m-compact__body--FontSizec_card_m_compact__body_FontSize
0.875rem
--pf-c-card--m-compact__footer--FontSizec_card_m_compact__footer_FontSize
0.875rem
--pf-c-card--m-compact__header--not-last-child--PaddingBottomc_card_m_compact__header_not_last_child_PaddingBottom
0.5rem
--pf-c-card--m-compact--child--PaddingBottomc_card_m_compact_child_PaddingBottom
1rem
--pf-c-card--m-compact--child--PaddingLeftc_card_m_compact_child_PaddingLeft
1rem
--pf-c-card--m-compact--child--PaddingRightc_card_m_compact_child_PaddingRight
1rem
--pf-c-card--m-compact--first-child--PaddingTopc_card_m_compact_first_child_PaddingTop
1rem
--pf-c-card--m-hoverable--hover--BoxShadowc_card_m_hoverable_hover_BoxShadow
0 0.1875rem 0.4375rem 0.1875rem rgba(3,3,3,0.13),0 0.6875rem 1.5rem 1rem rgba(3,3,3,0.12)