Card

Examples

Basic

Title

Body

With image and action

Title

Body

With title in head

Body

With only actions in head (no title/footer)

This is the card body. There are only actions in the card head.

Actions with no offset

Body

With only image in head

Title

Body

With no footer

With no title

This card has no title

With only a content section

Body

With multiple body sections

Title

Body

With only one body that fills

Title

Body pf-m-no-fill

Body

Compact

Title

Body

Large

Title

Body

Selectable

Body

Selectable secondary style

Body

Single selectable

Body

Actionable (button)

Body

Actionable (link)

Body

Actionable secondary style

Body

Actionable and selectable

Body

Actionable and selectable secondary style

Body

Secondary

Title

Body

Plain

Title

Body

Expandable

Expandable with image

Expanded

Body

Full height card

Body

Expandable toggle on right

Card with dividers between sections

Title

Body

Documentation

Overview

A card is a generic rectangular container that can be used to build other components. Use a default card for regular page content and the compact variation for dashboard or small cards.

Usage

Class	Applied	Outcome
`.pf-v6-c-card`	`<div>`	Creates a card component. Required
`.pf-v6-c-card__title`	`<div>`	Creates a card title container.
`.pf-v6-c-card__title-text`	`<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>`	Creates a card title text element.
`.pf-v6-c-card__body`	`<div>`	Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-v6-c-card__body` elements.
`.pf-v6-c-card__footer`	`<div>`	Creates the footer of a card.
`.pf-v6-c-card__header`	`<div>`	Creates the header of the card where images, actions, and/or the card title can go.
`.pf-v6-c-card__header-toggle`	`<div>`	Creates the expandable card toggle.
`.pf-v6-c-card__header-toggle-icon`	`<span>`	Creates the expandable card toggle icon.
`.pf-v6-c-card__actions`	`<div>`	Creates an actions element to be used in the card header.
`.pf-v6-c-card__selectable-actions`	`<div>`	Creates an element to hold a checkbox or radio and the related label used to make a card selectable or clickable.
`.pf-v6-c-card__header-main`	`<div>`	Creates a wrapper element to be used in the card header when using an image, logo, or text. Required if `.pf-v6-c-card__header` has content outside of a card header toggle or card header actions
`.pf-v6-c-card__expandable-content`	`<div>`	Creates the expandable card's expandable content.
`.pf-v6-c-card__sr-input`	`<input>`	Creates an input which, when focused, makes a following `.pf-v6-c-card` appear focused.
`.pf-m-compact`	`.pf-v6-c-card`	Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred.
`.pf-m-display-lg`	`.pf-v6-c-card`	Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases.
`.pf-m-no-fill`	`.pf-v6-c-card__body`	Sets a `.pf-v6-c-card__body` not to fill the available space in `.pf-v6-c-card`. `.pf-m-no-fill` can be added to multiple card bodies.
`.pf-m-selectable`	`.pf-v6-c-card`	Modifies a card to be selectable.
`.pf-m-clickable`	`.pf-v6-c-card`	Modifies a card to be clickable.
`.pf-m-selected`	`.pf-v6-c-card`	Modifies a selectable card for selected state styling. Can be used in addition to indicating selection via the `.pf-v6-c-card__input`.
`.pf-m-current`	`.pf-v6-c-card`	Modifies a card that is both clickable and selectable for clicked state styling.
`.pf-m-disabled`	`.pf-v6-c-card`	Modifies a card so it is not selectable or clickable.
`.pf-m-secondary`	`.pf-v6-c-card`	Modifies the card to have secondary styling.
`.pf-m-flat`	`.pf-v6-c-card`	Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background.
`.pf-m-rounded`	`.pf-v6-c-card`	Modifies the card to have rounded corners.
`.pf-m-plain`	`.pf-v6-c-card`	Modifies the card to have no box shadow and no background color.
`.pf-m-expanded`	`.pf-v6-c-card`	Modifies the card for the expanded state.
`.pf-m-toggle-right`	`.pf-v6-c-card__header`	Modifies the expandable card header toggle to be positioned at flex-end.
`.pf-m-full-height`	`.pf-v6-c-card`	Modifies the card to full height of its parent.
`.pf-m-no-offset`	`.pf-v6-c-card__actions`	Removes the negative vertical margins on the actions element intended to align the action content with the card title.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-card	--pf-v6-c-card--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-card--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-card	--pf-v6-c-card--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-card--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-card	--pf-v6-c-card--BorderStyle	solid
	.pf-v6-c-card	--pf-v6-c-card--BorderWidth	1px
--pf-v6-c-card--BorderWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-card	--pf-v6-c-card--BorderRadius	16px
--pf-v6-c-card--BorderRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-card	--pf-v6-c-card--first-child--PaddingBlockStart	1.5rem
--pf-v6-c-card--first-child--PaddingBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-card	--pf-v6-c-card--child--PaddingInlineEnd	1.5rem
--pf-v6-c-card--child--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-card	--pf-v6-c-card--child--PaddingBlockEnd	1.5rem
--pf-v6-c-card--child--PaddingBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-card	--pf-v6-c-card--child--PaddingInlineStart	1.5rem
--pf-v6-c-card--child--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-card	--pf-v6-c-card--c-divider--child--PaddingBlockStart	1.5rem
--pf-v6-c-card--c-divider--child--PaddingBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-card	--pf-v6-c-card__title--not--last-child--PaddingBlockEnd	1rem
--pf-v6-c-card__title--not--last-child--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-card	--pf-v6-c-card__title-text--Color	(In light theme) #151515
--pf-v6-c-card__title-text--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-card	--pf-v6-c-card__title-text--FontFamily	"Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
--pf-v6-c-card__title-text--FontFamily --pf-t--global--font--family--heading --pf-t--global--font--family--200 "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
	.pf-v6-c-card	--pf-v6-c-card__title-text--FontSize	1rem
--pf-v6-c-card__title-text--FontSize --pf-t--global--font--size--heading--xs --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-card	--pf-v6-c-card__title-text--FontWeight	500
--pf-v6-c-card__title-text--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.pf-v6-c-card	--pf-v6-c-card__title-text--LineHeight	1.3
--pf-v6-c-card__title-text--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	.pf-v6-c-card	--pf-v6-c-card--c-button--disabled--Color	(In light theme) #4d4d4d
--pf-v6-c-card--c-button--disabled--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-card	--pf-v6-c-card__body--FontSize	0.875rem
--pf-v6-c-card__body--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-card	--pf-v6-c-card__footer--FontSize	0.875rem
--pf-v6-c-card__footer--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-card	--pf-v6-c-card__footer--Color	(In light theme) #4d4d4d
--pf-v6-c-card__footer--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-card	--pf-v6-c-card__actions--PaddingInlineStart	1rem
--pf-v6-c-card__actions--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-card	--pf-v6-c-card__actions--Gap	1rem
--pf-v6-c-card__actions--Gap --pf-t--global--spacer--gap--action-to-action--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-card	--pf-v6-c-card__actions--MarginBlockStart	calc(0.5rem * -1)
--pf-v6-c-card__actions--MarginBlockStart calc(--pf-t--global--spacer--control--vertical--default * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-card	--pf-v6-c-card__actions--MarginBlockEnd	calc(0.5rem * -1)
--pf-v6-c-card__actions--MarginBlockEnd calc(--pf-t--global--spacer--control--vertical--default * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-card	--pf-v6-c-card__header-toggle--MarginBlockStart	calc(0.5rem * -1)
--pf-v6-c-card__header-toggle--MarginBlockStart calc(--pf-t--global--spacer--control--vertical--default * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-card	--pf-v6-c-card__header-toggle--MarginInlineEnd	0.5rem
--pf-v6-c-card__header-toggle--MarginInlineEnd --pf-t--global--spacer--gap--text-to-element--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-card	--pf-v6-c-card__header-toggle--MarginBlockEnd	calc(0.5rem * -1)
--pf-v6-c-card__header-toggle--MarginBlockEnd calc(--pf-t--global--spacer--control--vertical--default * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-card	--pf-v6-c-card__header-toggle--MarginInlineStart	calc(0.5rem * -1)
--pf-v6-c-card__header-toggle--MarginInlineStart calc(--pf-t--global--spacer--action--horizontal--plain--default * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-card	--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-card	--pf-v6-c-card__header-toggle-icon--TransitionDuration	200ms
--pf-v6-c-card__header-toggle-icon--TransitionDuration --pf-t--global--motion--duration--icon--long --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-card	--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate	90deg
	.pf-v6-c-card	--pf-v6-c-card--m-selectable--BorderWidth	1px
--pf-v6-c-card--m-selectable--BorderWidth --pf-v6-c-card--BorderWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-card	--pf-v6-c-card--m-clickable--m-current--BorderColor	(In light theme) #0066cc
--pf-v6-c-card--m-clickable--m-current--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-card	--pf-v6-c-card--m-clickable--m-current--BorderWidth	2px
--pf-v6-c-card--m-clickable--m-current--BorderWidth --pf-t--global--border--width--box--clicked --pf-t--global--border--width--200 2px
	.pf-v6-c-card	--pf-v6-c-card--m-selectable--m-selected--BorderColor	(In light theme) #0066cc
--pf-v6-c-card--m-selectable--m-selected--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-card	--pf-v6-c-card--m-selectable--m-selected--BorderWidth	2px
--pf-v6-c-card--m-selectable--m-selected--BorderWidth --pf-t--global--border--width--box--clicked --pf-t--global--border--width--200 2px
	.pf-v6-c-card	--pf-v6-c-card--m-selectable--hover--BorderColor	(In light theme) #4394e5
--pf-v6-c-card--m-selectable--hover--BorderColor --pf-t--global--border--color--hover --pf-t--global--color--brand--100 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-card	--pf-v6-c-card--m-selectable--focus--BorderColor	(In light theme) #4394e5
--pf-v6-c-card--m-selectable--focus--BorderColor --pf-t--global--border--color--hover --pf-t--global--color--brand--100 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-card	--pf-v6-c-card--m-selectable--focus--BorderWidth	1px
--pf-v6-c-card--m-selectable--focus--BorderWidth --pf-t--global--border--width--box--hover --pf-t--global--border--width--100 1px
	.pf-v6-c-card	--pf-v6-c-card--m-selectable--m-selected--focus--BorderColor	(In light theme) #0066cc
--pf-v6-c-card--m-selectable--m-selected--focus--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-card	--pf-v6-c-card--m-selectable--m-selected--focus--BorderWidth	2px
--pf-v6-c-card--m-selectable--m-selected--focus--BorderWidth --pf-t--global--border--width--box--clicked --pf-t--global--border--width--200 2px
	.pf-v6-c-card	--pf-v6-c-card--m-selectable--m-disabled__title-text--Color	(In light theme) #4d4d4d
--pf-v6-c-card--m-selectable--m-disabled__title-text--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-card	--pf-v6-c-card--m-selectable--m-disabled__body--Color	(In light theme) #4d4d4d
--pf-v6-c-card--m-selectable--m-disabled__body--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-card	--pf-v6-c-card--m-selectable--m-disabled__footer--Color	(In light theme) #4d4d4d
--pf-v6-c-card--m-selectable--m-disabled__footer--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-card	--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-card	--pf-v6-c-card--m-selectable--m-disabled--BorderColor	transparent
	.pf-v6-c-card	--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor	(In light theme) #0066cc
--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-card	--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth	2px
--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth --pf-t--global--border--width--box--clicked --pf-t--global--border--width--200 2px
	.pf-v6-c-card	--pf-v6-c-card--m-compact__title-text--FontSize	1rem
--pf-v6-c-card--m-compact__title-text--FontSize --pf-t--global--font--size--heading--xs --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-card	--pf-v6-c-card--m-compact__body--FontSize	0.875rem
--pf-v6-c-card--m-compact__body--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-card	--pf-v6-c-card--m-compact__footer--FontSize	0.75rem
--pf-v6-c-card--m-compact__footer--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-card	--pf-v6-c-card--m-compact--first-child--PaddingBlockStart	1rem
--pf-v6-c-card--m-compact--first-child--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-card	--pf-v6-c-card--m-compact--child--PaddingInlineEnd	1rem
--pf-v6-c-card--m-compact--child--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-card	--pf-v6-c-card--m-compact--child--PaddingBlockEnd	1rem
--pf-v6-c-card--m-compact--child--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-card	--pf-v6-c-card--m-compact--child--PaddingInlineStart	1rem
--pf-v6-c-card--m-compact--child--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-card	--pf-v6-c-card--m-compact--c-divider--child--PaddingBlockStart	1rem
--pf-v6-c-card--m-compact--c-divider--child--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-card	--pf-v6-c-card--m-compact__title--not--last-child--PaddingBlockEnd	0.5rem
--pf-v6-c-card--m-compact__title--not--last-child--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-card	--pf-v6-c-card--m-display-lg__title-text--FontSize	1.25rem
--pf-v6-c-card--m-display-lg__title-text--FontSize --pf-t--global--font--size--heading--md --pf-t--global--font--size--xl --pf-t--global--font--size--500 1.25rem
	.pf-v6-c-card	--pf-v6-c-card--m-display-lg__body--FontSize	1rem
--pf-v6-c-card--m-display-lg__body--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-card	--pf-v6-c-card--m-display-lg__footer--FontSize	0.875rem
--pf-v6-c-card--m-display-lg__footer--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-card	--pf-v6-c-card--m-display-lg--first-child--PaddingBlockStart	2rem
--pf-v6-c-card--m-display-lg--first-child--PaddingBlockStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-card	--pf-v6-c-card--m-display-lg--child--PaddingInlineEnd	2rem
--pf-v6-c-card--m-display-lg--child--PaddingInlineEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-card	--pf-v6-c-card--m-display-lg--child--PaddingBlockEnd	2rem
--pf-v6-c-card--m-display-lg--child--PaddingBlockEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-card	--pf-v6-c-card--m-display-lg--child--PaddingInlineStart	2rem
--pf-v6-c-card--m-display-lg--child--PaddingInlineStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-card	--pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart	2rem
--pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-card	--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd	1.5rem
--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-card	--pf-v6-c-card--m-secondary--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-card--m-secondary--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-card	--pf-v6-c-card--m-secondary--BorderColor	transparent
	.pf-v6-c-card	--pf-v6-c-card--m-full-height--Height	100%
	.pf-v6-c-card	--pf-v6-c-card--m-plain--BorderColor	transparent
	.pf-v6-c-card	--pf-v6-c-card--m-plain--BackgroundColor	transparent
	.pf-v6-c-card	--pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd	calc(0.5rem * -1)
--pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd calc(--pf-t--global--spacer--action--horizontal--plain--default * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-card	--pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart	0.5rem
--pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart --pf-t--global--spacer--gap--text-to-element--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-card.pf-m-current	--pf-v6-c-card--BorderColor	(In light theme) #0066cc
--pf-v6-c-card--BorderColor --pf-v6-c-card--m-clickable--m-current--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-card.pf-m-current	--pf-v6-c-card--BorderWidth	2px
--pf-v6-c-card--BorderWidth --pf-v6-c-card--m-clickable--m-current--BorderWidth --pf-t--global--border--width--box--clicked --pf-t--global--border--width--200 2px
	.pf-v6-c-card.pf-m-current	--pf-v6-c-card--m-selectable--hover--BorderColor	(In light theme) #0066cc
--pf-v6-c-card--m-selectable--hover--BorderColor --pf-v6-c-card--m-clickable--m-current--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-card.pf-m-current	--pf-v6-c-card--m-selectable--focus--BorderColor	(In light theme) #0066cc
--pf-v6-c-card--m-selectable--focus--BorderColor --pf-v6-c-card--m-clickable--m-current--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:focus-visible) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label)	--pf-v6-c-card--BackgroundColor	revert
	.pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:focus-visible) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label)	--pf-v6-c-card--BorderColor	revert
	.pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label)	--pf-v6-c-card--BorderColor	revert
	.pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label)	--pf-v6-c-card--m-selectable--BorderWidth	revert
	.pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-current	--pf-v6-c-card--BorderColor	(In light theme) #0066cc
--pf-v6-c-card--BorderColor --pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-current	--pf-v6-c-card--BorderWidth	2px
--pf-v6-c-card--BorderWidth --pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth --pf-t--global--border--width--box--clicked --pf-t--global--border--width--200 2px
	.pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label)	--pf-v6-c-card--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-card--BackgroundColor --pf-v6-c-card--m-selectable--m-disabled--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-card.pf-m-compact	--pf-v6-c-card__title-text--FontSize	1rem
--pf-v6-c-card__title-text--FontSize --pf-v6-c-card--m-compact__title-text--FontSize --pf-t--global--font--size--heading--xs --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-card.pf-m-compact	--pf-v6-c-card__body--FontSize	0.875rem
--pf-v6-c-card__body--FontSize --pf-v6-c-card--m-compact__body--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-card.pf-m-compact	--pf-v6-c-card__footer--FontSize	0.75rem
--pf-v6-c-card__footer--FontSize --pf-v6-c-card--m-compact__footer--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-card.pf-m-compact	--pf-v6-c-card--first-child--PaddingBlockStart	1rem
--pf-v6-c-card--first-child--PaddingBlockStart --pf-v6-c-card--m-compact--first-child--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-card.pf-m-compact	--pf-v6-c-card--child--PaddingInlineEnd	1rem
--pf-v6-c-card--child--PaddingInlineEnd --pf-v6-c-card--m-compact--child--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-card.pf-m-compact	--pf-v6-c-card--child--PaddingBlockEnd	1rem
--pf-v6-c-card--child--PaddingBlockEnd --pf-v6-c-card--m-compact--child--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-card.pf-m-compact	--pf-v6-c-card--child--PaddingInlineStart	1rem
--pf-v6-c-card--child--PaddingInlineStart --pf-v6-c-card--m-compact--child--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-card.pf-m-compact	--pf-v6-c-card--c-divider--child--PaddingBlockStart	1rem
--pf-v6-c-card--c-divider--child--PaddingBlockStart --pf-v6-c-card--m-compact--c-divider--child--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-card.pf-m-compact	--pf-v6-c-card__title--not--last-child--PaddingBlockEnd	0.5rem
--pf-v6-c-card__title--not--last-child--PaddingBlockEnd --pf-v6-c-card--m-compact__title--not--last-child--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-card.pf-m-display-lg	--pf-v6-c-card__title-text--FontSize	1.25rem
--pf-v6-c-card__title-text--FontSize --pf-v6-c-card--m-display-lg__title-text--FontSize --pf-t--global--font--size--heading--md --pf-t--global--font--size--xl --pf-t--global--font--size--500 1.25rem
	.pf-v6-c-card.pf-m-display-lg	--pf-v6-c-card__body--FontSize	1rem
--pf-v6-c-card__body--FontSize --pf-v6-c-card--m-display-lg__body--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-card.pf-m-display-lg	--pf-v6-c-card__footer--FontSize	0.875rem
--pf-v6-c-card__footer--FontSize --pf-v6-c-card--m-display-lg__footer--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-card.pf-m-display-lg	--pf-v6-c-card--first-child--PaddingBlockStart	2rem
--pf-v6-c-card--first-child--PaddingBlockStart --pf-v6-c-card--m-display-lg--first-child--PaddingBlockStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-card.pf-m-display-lg	--pf-v6-c-card--child--PaddingInlineEnd	2rem
--pf-v6-c-card--child--PaddingInlineEnd --pf-v6-c-card--m-display-lg--child--PaddingInlineEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-card.pf-m-display-lg	--pf-v6-c-card--child--PaddingBlockEnd	2rem
--pf-v6-c-card--child--PaddingBlockEnd --pf-v6-c-card--m-display-lg--child--PaddingBlockEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-card.pf-m-display-lg	--pf-v6-c-card--child--PaddingInlineStart	2rem
--pf-v6-c-card--child--PaddingInlineStart --pf-v6-c-card--m-display-lg--child--PaddingInlineStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-card.pf-m-display-lg	--pf-v6-c-card--c-divider--child--PaddingBlockStart	2rem
--pf-v6-c-card--c-divider--child--PaddingBlockStart --pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-card.pf-m-display-lg	--pf-v6-c-card__title--not--last-child--PaddingBlockEnd	1.5rem
--pf-v6-c-card__title--not--last-child--PaddingBlockEnd --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-card.pf-m-secondary	--pf-v6-c-card--BorderColor	transparent
--pf-v6-c-card--BorderColor --pf-v6-c-card--m-secondary--BorderColor transparent
	.pf-v6-c-card.pf-m-secondary	--pf-v6-c-card--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-card--BackgroundColor --pf-v6-c-card--m-secondary--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-card.pf-m-plain	--pf-v6-c-card--BorderColor	transparent
--pf-v6-c-card--BorderColor --pf-v6-c-card--m-plain--BorderColor transparent
	.pf-v6-c-card.pf-m-plain	--pf-v6-c-card--BackgroundColor	transparent
--pf-v6-c-card--BackgroundColor --pf-v6-c-card--m-plain--BackgroundColor transparent
	.pf-v6-c-card__header .pf-v6-c-card__title	--pf-v6-c-card--first-child--PaddingBlockStart	0
	.pf-v6-c-card__header .pf-v6-c-card__title	--pf-v6-c-card__title--not--last-child--PaddingBlockEnd	0
	.pf-v6-c-card__header.pf-m-toggle-right	--pf-v6-c-card__header-toggle--MarginInlineEnd	calc(0.5rem * -1)
--pf-v6-c-card__header-toggle--MarginInlineEnd --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd calc(--pf-t--global--spacer--action--horizontal--plain--default * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-card__header.pf-m-toggle-right	--pf-v6-c-card__header-toggle--MarginInlineStart	0.5rem
--pf-v6-c-card__header-toggle--MarginInlineStart --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart --pf-t--global--spacer--gap--text-to-element--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-card__actions.pf-m-no-offset	--pf-v6-c-card__actions--MarginBlockStart	0
	.pf-v6-c-card__actions.pf-m-no-offset	--pf-v6-c-card__actions--MarginBlockEnd	0
	.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover	--pf-v6-c-card--BorderColor	(In light theme) #4394e5
--pf-v6-c-card--BorderColor --pf-v6-c-card--m-selectable--hover--BorderColor --pf-t--global--border--color--hover --pf-t--global--color--brand--100 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-radio__label, .pf-v6-c-check__label)	--pf-v6-c-card--BorderColor	(In light theme) #0066cc
--pf-v6-c-card--BorderColor --pf-v6-c-card--m-selectable--m-selected--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-radio__label, .pf-v6-c-check__label)	--pf-v6-c-card--m-selectable--BorderWidth	2px
--pf-v6-c-card--m-selectable--BorderWidth --pf-v6-c-card--m-selectable--m-selected--BorderWidth --pf-t--global--border--width--box--clicked --pf-t--global--border--width--200 2px
	.pf-v6-c-card__selectable-actions .pf-v6-c-card__clickable-action:where(:focus-visible)	--pf-v6-c-card--BorderColor	(In light theme) #4394e5
--pf-v6-c-card--BorderColor --pf-v6-c-card--m-selectable--focus--BorderColor --pf-t--global--border--color--hover --pf-t--global--color--brand--100 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-card__selectable-actions .pf-v6-c-card__clickable-action:where(:focus-visible)	--pf-v6-c-card--BorderWidth	1px
--pf-v6-c-card--BorderWidth --pf-v6-c-card--m-selectable--focus--BorderWidth --pf-t--global--border--width--box--hover --pf-t--global--border--width--100 1px
	.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:focus-visible):where(:checked) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label)	--pf-v6-c-card--BorderColor	(In light theme) #0066cc
--pf-v6-c-card--BorderColor --pf-v6-c-card--m-selectable--m-selected--focus--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:focus-visible):where(:checked) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label)	--pf-v6-c-card--BorderWidth	2px
--pf-v6-c-card--BorderWidth --pf-v6-c-card--m-selectable--m-selected--focus--BorderWidth --pf-t--global--border--width--box--clicked --pf-t--global--border--width--200 2px
	.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label)	--pf-v6-c-card__title-text--Color	(In light theme) #4d4d4d
--pf-v6-c-card__title-text--Color --pf-v6-c-card--m-selectable--m-disabled__title-text--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label)	--pf-v6-c-card__body--Color	(In light theme) #4d4d4d
--pf-v6-c-card__body--Color --pf-v6-c-card--m-selectable--m-disabled__body--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label)	--pf-v6-c-card__footer--Color	(In light theme) #4d4d4d
--pf-v6-c-card__footer--Color --pf-v6-c-card--m-selectable--m-disabled__footer--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label)	--pf-v6-c-card--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-card--BackgroundColor --pf-v6-c-card--m-selectable--m-disabled--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label)	--pf-v6-c-card--BorderColor	transparent
--pf-v6-c-card--BorderColor --pf-v6-c-card--m-selectable--m-disabled--BorderColor transparent
	.pf-v6-c-card__header .pf-v6-c-button.pf-m-inline:disabled	--pf-v6-c-button--disabled--Color	(In light theme) #4d4d4d
--pf-v6-c-button--disabled--Color --pf-v6-c-card--c-button--disabled--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-card__expandable-content	--pf-v6-c-card--first-child--PaddingBlockStart	0

View source on GitHub

Card

Examples

Basic

Title

With image and action

Title

With title in head

This is a really really really really really really really really really really long title

With only actions in head (no title/footer)

Actions with no offset

This is a card title

With only image in head

Title

With no footer

Title

With no title

With only a content section

With multiple body sections

Title

With only one body that fills

Title

Compact

Title

Large

Title

Selectable

Title

Disabled card

Selected but disabled card

Selectable secondary style

Title

Disabled card

Selected but disabled card

Single selectable

Title

Disabled card

Selected but disabled card

Actionable (button)

Title

Title (clicked)

Disabled card

Actionable (link)

Title

Disabled card

Actionable secondary style

Title

Disabled card

Actionable and selectable

Title

Current card (clicked)

Disabled card

Selected but disabled card

Actionable and selectable secondary style

Title

Current card (clicked)

Disabled card

Selected but disabled card

Secondary

Title

Plain

Title

Expandable

Title

Expandable with image

Expanded

Title

Full height card

Title

Expandable toggle on right

Title

Card with dividers between sections

Title

Documentation

Overview

Usage

CSS variables