Skip to Content
Patternfly Logo

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

PatternFly logo
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

PatternFly Logo
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.ReactNodeNonullContent rendered inside the Card
classNamestringNo''Additional classes added to the Card
componentunknownNo'article'Sets the base component to render. defaults to article
isHoverablebooleanNofalseModifies the card to include hover styles on :hover
isCompactbooleanNofalseModifies the card to include compact styling
CardHeader properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Card Footer
classNamestringNo''Additional classes added to the Header
CardBody properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Card Body
classNamestringNo''Additional classes added to the Card Body
componentunknownNo'div'Sets the base component to render. defaults to div
isFilledbooleanNotrueEnables the body Content to fill the height of the card
CardFooter properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Card Footer
classNamestringNo''Additional classes added to the Footer
componentunknownNo'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)
--pf-c-card--m-selectable--active--BoxShadowc_card_m_selectable_active_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)
--pf-c-card--m-selectable--focus--BoxShadowc_card_m_selectable_focus_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)
--pf-c-card--m-selectable--hover--BoxShadowc_card_m_selectable_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)
--pf-c-card--m-selectable--m-selected--before--BackgroundColorc_card_m_selectable_m_selected_before_BackgroundColor
#06c
--pf-c-card--m-selectable--m-selected--before--Heightc_card_m_selectable_m_selected_before_Height
3px
--pf-c-card--m-selectable--m-selected--BoxShadowc_card_m_selectable_m_selected_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)