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

Selectable and selected

First card
This is a selectable card. Click me to select me. Click again to deselect me.

Second card
This is a selectable card. Click me to select me. Click again to deselect me.

Flat

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
isSelectablebooleanNofalseModifies the card to include selectable styling
isSelectedbooleanNofalseModifies the card to include selected styling
isFlatbooleanNofalseModifies the card to include flat styling
ouiaSafeNotrue
CardHeaderMain properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Card Head Main
classNamestringNo''Additional classes added to the Card Head Main
CardTitle properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the CardTitle
classNamestringNo''Additional classes added to the CardTitle
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--pf-c-card--BackgroundColorc_card_BackgroundColor
#fff
.pf-c-card--pf-c-card--BoxShadowc_card_BoxShadow
0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)
.pf-c-card--pf-c-card--m-hoverable--hover--BoxShadowc_card_m_hoverable_hover_BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-card--pf-c-card--m-selectable--hover--BoxShadowc_card_m_selectable_hover_BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-card--pf-c-card--m-selectable--focus--BoxShadowc_card_m_selectable_focus_BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-card--pf-c-card--m-selectable--active--BoxShadowc_card_m_selectable_active_BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-card--pf-c-card--m-selectable--m-selected--BoxShadowc_card_m_selectable_m_selected_BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-card--pf-c-card--m-selectable--m-selected--before--Heightc_card_m_selectable_m_selected_before_Height
3px
.pf-c-card--pf-c-card--m-selectable--m-selected--before--BackgroundColorc_card_m_selectable_m_selected_before_BackgroundColor
#06c
.pf-c-card--pf-c-card--m-compact__body--FontSizec_card_m_compact__body_FontSize
0.875rem
.pf-c-card--pf-c-card--m-compact__footer--FontSizec_card_m_compact__footer_FontSize
0.875rem
.pf-c-card--pf-c-card--m-compact--first-child--PaddingTopc_card_m_compact_first_child_PaddingTop
1rem
.pf-c-card--pf-c-card--m-compact--child--PaddingRightc_card_m_compact_child_PaddingRight
1rem
.pf-c-card--pf-c-card--m-compact--child--PaddingBottomc_card_m_compact_child_PaddingBottom
1rem
.pf-c-card--pf-c-card--m-compact--child--PaddingLeftc_card_m_compact_child_PaddingLeft
1rem
.pf-c-card--pf-c-card--m-compact__title--not--last-child--PaddingBottomc_card_m_compact__title_not_last_child_PaddingBottom
0.5rem
.pf-c-card--pf-c-card--m-flat--BorderWidthc_card_m_flat_BorderWidth
1px
.pf-c-card--pf-c-card--m-flat--BorderColorc_card_m_flat_BorderColor
#d2d2d2
.pf-c-card--pf-c-card--first-child--PaddingTopc_card_first_child_PaddingTop
1.5rem
.pf-c-card--pf-c-card--child--PaddingRightc_card_child_PaddingRight
1.5rem
.pf-c-card--pf-c-card--child--PaddingBottomc_card_child_PaddingBottom
1.5rem
.pf-c-card--pf-c-card--child--PaddingLeftc_card_child_PaddingLeft
1.5rem
.pf-c-card--pf-c-card__title--FontSizec_card__title_FontSize
1rem
.pf-c-card--pf-c-card__title--FontWeightc_card__title_FontWeight
700
.pf-c-card--pf-c-card__title--not--last-child--PaddingBottomc_card__title_not_last_child_PaddingBottom
1rem
.pf-c-card--pf-c-card__body--FontSizec_card__body_FontSize
1rem
.pf-c-card--pf-c-card__footer--FontSizec_card__footer_FontSize
1rem
.pf-c-card--pf-c-card__actions--PaddingLeftc_card__actions_PaddingLeft
1rem
.pf-c-card--pf-c-card__actions--child--MarginLeftc_card__actions_child_MarginLeft
0.5rem
.pf-c-card.pf-m-compact--pf-c-card__body--FontSizec_card__body_FontSize
0.875rem
.pf-c-card.pf-m-compact--pf-c-card__footer--FontSizec_card__footer_FontSize
0.875rem
.pf-c-card.pf-m-compact--pf-c-card--first-child--PaddingTopc_card_first_child_PaddingTop
1rem
.pf-c-card.pf-m-compact--pf-c-card--child--PaddingRightc_card_child_PaddingRight
1rem
.pf-c-card.pf-m-compact--pf-c-card--child--PaddingBottomc_card_child_PaddingBottom
1rem
.pf-c-card.pf-m-compact--pf-c-card--child--PaddingLeftc_card_child_PaddingLeft
1rem
.pf-c-card.pf-m-compact--pf-c-card__title--not--last-child--PaddingBottomc_card__title_not_last_child_PaddingBottom
0.5rem
.pf-c-card.pf-m-flat--pf-c-card--BoxShadowc_card_BoxShadow
none