Skip to content
Patternfly Logo

Card

Examples

Basic

Header
Body

Modifiers

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

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.

With heading element

Header

Body

Expandable

Header

Expandable with icon

PatternFly logo

Props

Card

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
idstringNo''ID of the Card. Also passed back in the CardHeader onExpand callback.
isCompactbooleanNofalseModifies the card to include compact styling. Should not be used with isLarge.
isExpandedbooleanNofalseFlag indicating if a card is expanded. Modifies the card to be expandable.
isFlatbooleanNofalseModifies the card to include flat styling
isHoverablebooleanNofalseModifies the card to include hover styles on :hover
isLargebooleanNofalseModifies the card to be large. Should not be used with isCompact.
isRoundedbooleanNofalseModifies the card to include rounded styling
isSelectablebooleanNofalseModifies the card to include selectable styling
isSelectedbooleanNofalseModifies the card to include selected styling
ouiaSafeNo type infoNotrue

CardHeaderMain

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Card Head Main
classNamestringNo''Additional classes added to the Card Head Main

CardTitle

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the CardTitle
classNamestringNo''Additional classes added to the CardTitle
componentunknownNo'div'Sets the base component to render. defaults to div

CardBody

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

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

CardExpandableContent

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Card Body
classNamestringNo''Additional classes added to the Card Body

CSS variables

.pf-c-card--pf-c-card--BackgroundColor
#fff
.pf-c-card--pf-c-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--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--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--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--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--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--Height
3px
.pf-c-card--pf-c-card--m-selectable--m-selected--before--BackgroundColor
#06c
.pf-c-card--pf-c-card--m-compact__body--FontSize
0.875rem
.pf-c-card--pf-c-card--m-compact__footer--FontSize
0.875rem
.pf-c-card--pf-c-card--m-compact--first-child--PaddingTop
1rem
.pf-c-card--pf-c-card--m-compact--child--PaddingRight
1rem
.pf-c-card--pf-c-card--m-compact--child--PaddingBottom
1rem
.pf-c-card--pf-c-card--m-compact--child--PaddingLeft
1rem
.pf-c-card--pf-c-card--m-compact--c-divider--child--PaddingTop
1rem
.pf-c-card--pf-c-card--m-compact__title--not--last-child--PaddingBottom
0.5rem
.pf-c-card--pf-c-card--m-display-lg__title--FontSize
1.25rem
.pf-c-card--pf-c-card--m-display-lg--first-child--PaddingTop
2rem
.pf-c-card--pf-c-card--m-display-lg--child--PaddingRight
2rem
.pf-c-card--pf-c-card--m-display-lg--child--PaddingBottom
2rem
.pf-c-card--pf-c-card--m-display-lg--child--PaddingLeft
2rem
.pf-c-card--pf-c-card--m-display-lg--c-divider--child--PaddingTop
2rem
.pf-c-card--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom
1.5rem
.pf-c-card--pf-c-card--m-flat--BorderWidth
1px
.pf-c-card--pf-c-card--m-flat--BorderColor
#d2d2d2
.pf-c-card--pf-c-card--m-rounded--BorderRadius
3px
.pf-c-card--pf-c-card--first-child--PaddingTop
1.5rem
.pf-c-card--pf-c-card--child--PaddingRight
1.5rem
.pf-c-card--pf-c-card--child--PaddingBottom
1.5rem
.pf-c-card--pf-c-card--child--PaddingLeft
1.5rem
.pf-c-card--pf-c-card--c-divider--child--PaddingTop
1.5rem
.pf-c-card--pf-c-card__header-toggle--MarginTop
calc(0.375rem * -1)
.pf-c-card--pf-c-card__header-toggle--MarginRight
0.25rem
.pf-c-card--pf-c-card__header-toggle--MarginBottom
calc(0.375rem * -1)
.pf-c-card--pf-c-card__header-toggle--MarginLeft
calc(1rem * -1)
.pf-c-card--pf-c-card__header-toggle-icon--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-card--pf-c-card--m-full-height--Height
100%
.pf-c-card--pf-c-card__title--FontSize
1rem
.pf-c-card--pf-c-card__title--FontWeight
700
.pf-c-card--pf-c-card__title--not--last-child--PaddingBottom
1rem
.pf-c-card--pf-c-card__body--FontSize
1rem
.pf-c-card--pf-c-card__footer--FontSize
1rem
.pf-c-card--pf-c-card__actions--PaddingLeft
1rem
.pf-c-card--pf-c-card__actions--child--MarginLeft
0.5rem
.pf-c-card--pf-c-card--m-plain--BoxShadow
none
.pf-c-card--pf-c-card--m-plain--BackgroundColor
transparent
.pf-c-card--pf-c-card__header--m-toggle-right--toggle--MarginRight
calc(0.375rem * -1)
.pf-c-card--pf-c-card__header--m-toggle-right--toggle--MarginLeft
0
.pf-c-card.pf-m-compact--pf-c-card__body--FontSize
0.875rem
.pf-c-card.pf-m-compact--pf-c-card__footer--FontSize
0.875rem
.pf-c-card.pf-m-compact--pf-c-card--first-child--PaddingTop
1rem
.pf-c-card.pf-m-compact--pf-c-card--child--PaddingRight
1rem
.pf-c-card.pf-m-compact--pf-c-card--child--PaddingBottom
1rem
.pf-c-card.pf-m-compact--pf-c-card--child--PaddingLeft
1rem
.pf-c-card.pf-m-compact--pf-c-card--c-divider--child--PaddingTop
1rem
.pf-c-card.pf-m-compact--pf-c-card__title--not--last-child--PaddingBottom
0.5rem
.pf-c-card.pf-m-display-lg--pf-c-card__title--FontSize
1.25rem
.pf-c-card.pf-m-display-lg--pf-c-card--first-child--PaddingTop
2rem
.pf-c-card.pf-m-display-lg--pf-c-card--child--PaddingRight
2rem
.pf-c-card.pf-m-display-lg--pf-c-card--child--PaddingBottom
2rem
.pf-c-card.pf-m-display-lg--pf-c-card--child--PaddingLeft
2rem
.pf-c-card.pf-m-display-lg--pf-c-card--c-divider--child--PaddingTop
2rem
.pf-c-card.pf-m-display-lg--pf-c-card__title--not--last-child--PaddingBottom
1.5rem
.pf-c-card.pf-m-flat--pf-c-card--BoxShadow
none
.pf-c-card.pf-m-plain--pf-c-card--BoxShadow
none
.pf-c-card.pf-m-plain--pf-c-card--BackgroundColor
transparent
.pf-c-card__header .pf-c-card__title--pf-c-card--first-child--PaddingTop
0
.pf-c-card__header .pf-c-card__title--pf-c-card__title--not--last-child--PaddingBottom
0
.pf-c-card__header.pf-m-toggle-right--pf-c-card__header-toggle--MarginRight
calc(0.375rem * -1)
.pf-c-card__header.pf-m-toggle-right--pf-c-card__header-toggle--MarginLeft
0
.pf-c-card__expandable-content--pf-c-card--first-child--PaddingTop
0

View source on GitHub