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.

Examples Props CSS Variables

Examples

Basic

Body

With image and actions

Body

Card header in card head

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

Body

With no header

This card has no header

With only a content section

Body

With multiple body sections

Body

With only one body that fills

Body pf-m-no-fill

Body

Hover

Body

Compact

Body

Selectable and selected

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

Flat

Body

Props

Card properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the Card
className	string	No	''	Additional classes added to the Card
component	unknown	No	'article'	Sets the base component to render. defaults to article
isHoverable	boolean	No	false	Modifies the card to include hover styles on :hover
isCompact	boolean	No	false	Modifies the card to include compact styling
isSelectable	boolean	No	false	Modifies the card to include selectable styling
isSelected	boolean	No	false	Modifies the card to include selected styling
isFlat	boolean	No	false	Modifies the card to include flat styling

CardHeadMain properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the Card Head Main
className	string	No	''	Additional classes added to the Card Head Main

CardHeader properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the Card Footer
className	string	No	''	Additional classes added to the Header

CardBody properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the Card Body
className	string	No	''	Additional classes added to the Card Body
component	unknown	No	'div'	Sets the base component to render. defaults to div
isFilled	boolean	No	true	Enables the body Content to fill the height of the card

CardFooter properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the Card Footer
className	string	No	''	Additional classes added to the Footer
component	unknown	No	'div'	Sets the base component to render. defaults to div

CSS Variables


	.pf-c-card	--pf-c-card--BackgroundColor	#fff
--pf-c-card--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #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--BoxShadow --pf-global--BoxShadow--sm $pf-global--BoxShadow--sm 0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(2px) 0 rgba($pf-color-black-1000, .06) 0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba(#030303, .12), 0 0 pf-size-prem(2px) 0 rgba(#030303, .06) 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--m-hoverable--hover--BoxShadow --pf-global--BoxShadow--lg $pf-global--BoxShadow--lg 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .08) 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba(#030303, .16), 0 0 pf-size-prem(6px) 0 rgba(#030303, .08) 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--m-selectable--hover--BoxShadow --pf-global--BoxShadow--lg $pf-global--BoxShadow--lg 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .08) 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba(#030303, .16), 0 0 pf-size-prem(6px) 0 rgba(#030303, .08) 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--m-selectable--focus--BoxShadow --pf-global--BoxShadow--lg $pf-global--BoxShadow--lg 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .08) 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba(#030303, .16), 0 0 pf-size-prem(6px) 0 rgba(#030303, .08) 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--m-selectable--active--BoxShadow --pf-global--BoxShadow--lg $pf-global--BoxShadow--lg 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .08) 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba(#030303, .16), 0 0 pf-size-prem(6px) 0 rgba(#030303, .08) 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--m-selectable--m-selected--BoxShadow --pf-global--BoxShadow--lg $pf-global--BoxShadow--lg 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .08) 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba(#030303, .16), 0 0 pf-size-prem(6px) 0 rgba(#030303, .08) 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--m-selectable--m-selected--before--Height --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-card	--pf-c-card--m-selectable--m-selected--before--BackgroundColor	#06c
--pf-c-card--m-selectable--m-selected--before--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-card	--pf-c-card--m-compact__body--FontSize	0.875rem
--pf-c-card--m-compact__body--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-card	--pf-c-card--m-compact__footer--FontSize	0.875rem
--pf-c-card--m-compact__footer--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-card	--pf-c-card--m-compact--first-child--PaddingTop	1rem
--pf-c-card--m-compact--first-child--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-card	--pf-c-card--m-compact--child--PaddingRight	1rem
--pf-c-card--m-compact--child--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-card	--pf-c-card--m-compact--child--PaddingBottom	1rem
--pf-c-card--m-compact--child--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-card	--pf-c-card--m-compact--child--PaddingLeft	1rem
--pf-c-card--m-compact--child--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-card	--pf-c-card--m-compact__header--not--last-child--PaddingBottom	0.5rem
--pf-c-card--m-compact__header--not--last-child--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-card	--pf-c-card--m-flat--BorderWidth	1px
--pf-c-card--m-flat--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-card	--pf-c-card--m-flat--BorderColor	#d2d2d2
--pf-c-card--m-flat--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-card	--pf-c-card--first-child--PaddingTop	1.5rem
--pf-c-card--first-child--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-card	--pf-c-card--child--PaddingRight	1.5rem
--pf-c-card--child--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-card	--pf-c-card--child--PaddingBottom	1.5rem
--pf-c-card--child--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-card	--pf-c-card--child--PaddingLeft	1.5rem
--pf-c-card--child--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-card	--pf-c-card__header--not--last-child--PaddingBottom	1rem
--pf-c-card__header--not--last-child--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-card	--pf-c-card__body--FontSize	1rem
--pf-c-card__body--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-card	--pf-c-card__footer--FontSize	1rem
--pf-c-card__footer--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-card	--pf-c-card__actions--PaddingLeft	1rem
--pf-c-card__actions--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-card	--pf-c-card__actions--child--MarginLeft	0.5rem
--pf-c-card__actions--child--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-card.pf-m-compact	--pf-c-card__body--FontSize	0.875rem
--pf-c-card__body--FontSize --pf-c-card--m-compact__body--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-card.pf-m-compact	--pf-c-card__footer--FontSize	0.875rem
--pf-c-card__footer--FontSize --pf-c-card--m-compact__footer--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-card.pf-m-compact	--pf-c-card--first-child--PaddingTop	1rem
--pf-c-card--first-child--PaddingTop --pf-c-card--m-compact--first-child--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-card.pf-m-compact	--pf-c-card--child--PaddingRight	1rem
--pf-c-card--child--PaddingRight --pf-c-card--m-compact--child--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-card.pf-m-compact	--pf-c-card--child--PaddingBottom	1rem
--pf-c-card--child--PaddingBottom --pf-c-card--m-compact--child--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-card.pf-m-compact	--pf-c-card--child--PaddingLeft	1rem
--pf-c-card--child--PaddingLeft --pf-c-card--m-compact--child--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-card.pf-m-compact	--pf-c-card__header--not--last-child--PaddingBottom	0.5rem
--pf-c-card__header--not--last-child--PaddingBottom --pf-c-card--m-compact__header--not--last-child--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-card.pf-m-flat	--pf-c-card--BoxShadow	none

Card

Examples

Basic

With image and actions

Card header in card head

Only actions in card head (no header/footer)

Only image in the card head

With no footer

With no header

With only a content section

With multiple body sections

With only one body that fills

Hover

Compact

Selectable and selected

Flat

Props

CSS Variables