Skip to content
Patternfly Logo

Card

Examples

Basic

Header
Body

With modifiers

Header
Body

With image and actions

PatternFly logo
Header
Body

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 card head

PatternFly logo
Header
Body

With no header

This card has no header

With only a body section

Body

With multiple body sections

Header
Body
Body
Body

With only a body section that fills

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

Selectable

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.

Third card
This is a raised but disabled card.

Selectable accessibility highlight

This example demonstrates how the hasSelectableInput and onSelectableInputChange props improve accessibility for selectable cards.

The first card sets hasSelectableInput to true, which renders a checkbox input that is only visible to, and navigable by, screen readers. This input communicates to assistive technology users that a card is selectable, and if so, it communicates the current selection state as well.

By default this input will have an aria-label that corresponds to the title given to the card if using the card title component. If you don't use the card title component in your selectable card, you must pass a custom aria-label for this input using the selectableInputAriaLabel prop.

The first card also (by passing an onchange callback to onSelectableInputChange) enables the selection/deselection of the associated card by checking/unchecking the checkbox input.

The second card does not set hasSelectableInput to true, so the input is not rendered. It does not communicate to screen reader users that it is selectable or if it is currently selected.

To best understand this example it is encouraged that you navigate both of these cards using a screen reader.

Selectable card with proper accessibility considerations
When using a screen reader a checkbox will become navigable that indicates this card is selectable and communicate if it is currently selected.

Selectable card without proper accessibility considerations
When using a screen reader there are no indications that this card is selectable or if it is currently selected.

With heading element

Header within an <h4> element

Body

Expandable

Header

Expandable with icon

PatternFly logo

Legacy selectable

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

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

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
hasSelectableInputbooleanfalseFlag indicating that the card should render a hidden input to make it selectable
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.
isDisabledRaisedBetabooleanfalseModifies a raised selectable card to have disabled styling
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
Deprecated: isHoverablebooleanfalseto make a card hoverable, use isSelectable or isSelectableRaised.
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
isSelectableRaisedBetabooleanfalseSpecifies the card is selectable, and applies the new raised styling on hover and select
isSelectedbooleanfalseModifies the card to include selected styling
onSelectableInputChange(labelledBy: string, event: React.FormEvent<HTMLInputElement>) => void() => {}Callback that executes when the selectable input is changed
ouiaSafeNo type infotrue
selectableInputAriaLabelstringAria label to apply to the selectable input if one is rendered

CardActions

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Card Action
classNamestring''Additional classes added to the Action
hasNoOffsetbooleanfalseFlag indicating that the actions have no offset

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--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__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__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-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-hoverable-raised--hover--BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-c-card--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor
#73bcf7
.pf-c-card--pf-c-card--m-selectable-raised--before--Right
0
.pf-c-card--pf-c-card--m-selectable-raised--before--Bottom
0
.pf-c-card--pf-c-card--m-selectable-raised--before--Left
0
.pf-c-card--pf-c-card--m-flat--m-selectable-raised--before--Right
calc(-1 * 1px)
.pf-c-card--pf-c-card--m-flat--m-selectable-raised--before--Bottom
calc(-1 * 1px)
.pf-c-card--pf-c-card--m-flat--m-selectable-raised--before--Left
calc(-1 * 1px)
.pf-c-card--pf-c-card--m-selectable-raised--before--Height
4px
.pf-c-card--pf-c-card--m-selectable-raised--before--BackgroundColor
transparent
.pf-c-card--pf-c-card--m-selectable-raised--before--Transition
none
.pf-c-card--pf-c-card--m-selectable-raised--before--ScaleY
1
.pf-c-card--pf-c-card--m-selectable-raised--before--TranslateY
0
.pf-c-card--pf-c-card--m-selectable-raised--hover--BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-c-card--pf-c-card--m-selectable-raised--hover--before--BackgroundColor
#73bcf7
.pf-c-card--pf-c-card--m-selectable-raised--focus--BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-c-card--pf-c-card--m-selectable-raised--focus--before--BackgroundColor
#73bcf7
.pf-c-card--pf-c-card--m-selectable-raised--active--BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-c-card--pf-c-card--m-selectable-raised--active--before--BackgroundColor
#73bcf7
.pf-c-card--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor
#06c
.pf-c-card--pf-c-card--m-selectable-raised--m-selected-raised--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-raised--m-selected-raised--TranslateY--base
-0.5rem
.pf-c-card--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY
-0.5rem
.pf-c-card--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY
calc(-0.5rem + 1px)
.pf-c-card--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY
calc(-0.5rem + 3px)
.pf-c-card--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex
100
.pf-c-card--pf-c-card--m-selectable-raised--m-selected-raised--Transition
transform .25s linear, box-shadow .25s linear
.pf-c-card--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition
transform .25s linear
.pf-c-card--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY
calc(-0.5rem * -1)
.pf-c-card--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY
2
.pf-c-card--pf-c-card--m-non-selectable-raised--BackgroundColor
#fafafa
.pf-c-card--pf-c-card--m-non-selectable-raised--before--BackgroundColor
#d2d2d2
.pf-c-card--pf-c-card--m-non-selectable-raised--before--ScaleY
2
.pf-c-card--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor
#d2d2d2
.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--m-full-height--Height
100%
.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-c-card__input--focus--BorderWidth
2px
.pf-c-card--pf-c-card__input--focus--BorderColor
#06c
.pf-c-card.pf-m-hoverable-raised:hover--pf-c-card--BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-c-card.pf-m-hoverable-raised:hover--pf-c-card--m-selectable-raised--before--BackgroundColor
#73bcf7
.pf-c-card.pf-m-selectable-raised:hover--pf-c-card--BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-c-card.pf-m-selectable-raised:hover--pf-c-card--m-selectable-raised--before--BackgroundColor
#73bcf7
.pf-c-card.pf-m-selectable-raised:focus--pf-c-card--BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-c-card.pf-m-selectable-raised:focus--pf-c-card--m-selectable-raised--before--BackgroundColor
#73bcf7
.pf-c-card.pf-m-selectable-raised:active--pf-c-card--BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-c-card.pf-m-selectable-raised:active--pf-c-card--m-selectable-raised--before--BackgroundColor
#73bcf7
.pf-c-card.pf-m-selectable-raised.pf-m-selected-raised--pf-c-card--m-selectable-raised--before--BackgroundColor
#06c
.pf-c-card.pf-m-selectable-raised.pf-m-selected-raised--pf-c-card--m-selectable-raised--before--Transition
transform .25s linear
.pf-c-card.pf-m-selectable-raised.pf-m-selected-raised--pf-c-card--m-selectable-raised--before--TranslateY
calc(-0.5rem * -1)
.pf-c-card.pf-m-selectable-raised.pf-m-selected-raised--pf-c-card--m-selectable-raised--before--ScaleY
2
.pf-c-card.pf-m-non-selectable-raised--pf-c-card--BackgroundColor
#fafafa
.pf-c-card.pf-m-non-selectable-raised--pf-c-card--BoxShadow
none
.pf-c-card.pf-m-non-selectable-raised--pf-c-card--m-flat--BorderColor
#d2d2d2
.pf-c-card.pf-m-non-selectable-raised--pf-c-card--m-selectable-raised--before--BackgroundColor
#d2d2d2
.pf-c-card.pf-m-non-selectable-raised--pf-c-card--m-selectable-raised--before--ScaleY
2
.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-flat--pf-c-card--m-selectable-raised--before--Right
calc(-1 * 1px)
.pf-c-card.pf-m-flat--pf-c-card--m-selectable-raised--before--Bottom
calc(-1 * 1px)
.pf-c-card.pf-m-flat--pf-c-card--m-selectable-raised--before--Left
calc(-1 * 1px)
.pf-c-card.pf-m-flat--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY
calc(-0.5rem + 1px)
.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.pf-m-rounded--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY
calc(-0.5rem + 3px)
.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