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 are 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

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Card
classNamestring''Additional classes added to the Card
componentunknown'article'Sets the base component to render. defaults to article
idstring''ID of the Card. Also passed back in the CardHeader onExpand callback.
isCompactbooleanfalseModifies the card to include compact styling. Should not be used with isLarge.
isExpandedbooleanfalseFlag indicating if a card is expanded. Modifies the card to be expandable.
isFlatbooleanfalseModifies the card to include flat styling
isFullHeightbooleanfalseCause component to consume the available height of its container
isHoverablebooleanfalseModifies the card to include hover styles on :hover
isLargebooleanfalseModifies the card to be large. Should not be used with isCompact.
isPlainbooleanfalseModifies the card to include plain styling; this removes border and background
isRoundedbooleanfalseModifies the card to include rounded styling
isSelectablebooleanfalseModifies the card to include selectable styling
isSelectedbooleanfalseModifies the card to include selected styling
ouiaSafeNo type infotrue

CardHeader

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the CardHeader
classNamestring''Additional classes added to the CardHeader
idstringID of the card header.
isToggleRightAlignedbooleanWhether to right-align expandable toggle button
onExpand(event: React.MouseEvent, id: string) => voidCallback expandable card
toggleButtonPropsanyAdditional props for expandable toggle button

CardHeaderMain

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Card Head Main
classNamestring''Additional classes added to the Card Head Main

CardTitle

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the CardTitle
classNamestring''Additional classes added to the CardTitle
componentunknown'div'Sets the base component to render. defaults to div

CardBody

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Card Body
classNamestring''Additional classes added to the Card Body
componentunknown'div'Sets the base component to render. defaults to div
isFilledbooleantrueEnables the body Content to fill the height of the card

CardFooter

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Card Footer
classNamestring''Additional classes added to the Footer
componentunknown'div'Sets the base component to render. defaults to div

CardExpandableContent

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Card Body
classNamestring''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-expanded__header-toggle-icon--Rotate
90deg
.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.25rem
.pf-c-card--pf-c-card__header--m-toggle-right--actions--MarginRight
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.25rem
.pf-c-card__header.pf-m-toggle-right .pf-c-card__actions--pf-c-card__header-toggle--MarginRight
0
.pf-c-card__actions.pf-m-no-offset--pf-c-card__header-toggle--MarginTop
0
.pf-c-card__actions.pf-m-no-offset--pf-c-card__header-toggle--MarginBottom
0
.pf-c-card__expandable-content--pf-c-card--first-child--PaddingTop
0

View source on GitHub