Skip to content
PatternFly.org Contribute on Github
PatternFly Elements
Versions v5 v4 v3 v2 v1

Card

A card is a container for information about a single subject. A card MAY combine a header, title, subtitle, actions, bodies, expandable content, and a footer. Selectable cards MUST have an accessible name for screen readers; each card control exposes its ARIA state.

Overview

A card is a square or rectangular container that can contain any kind of content. Cards symbolize units of information, and each one acts as an entry point for users to access more details.

Title

Body Footer

Installation

npm install @patternfly/elements

Usage

Basic

A card typically contains a title, body, and footer. Any of these sections may be omitted, but a body is recommended.

Title

Body Footer
View HTML Source 
<pf-v6-card>
  <h2 slot="title">Title</h2>
  <pf-v6-card-body>Body</pf-v6-card-body>
  <span slot="footer">Footer</span>
</pf-v6-card>

Header with actions

Place header images in the header slot, the title in the title slot, and actions in the actions slot.

PatternFly

Title

Subtitle Body
View HTML Source 
<pf-v6-card>
  <img slot="header" src="/brand/logo/svg/pfe-icon-blue.svg" alt="PatternFly">
  <button slot="actions" type="button" aria-label="Actions">Actions</button>
  <h2 slot="title">Title</h2>
  <span slot="subtitle">Subtitle</span>
  <pf-v6-card-body>Body</pf-v6-card-body>
</pf-v6-card>

Selectable

A selectable card can be selected by clicking anywhere within it. Give each control an accessible name with accessible-label.

First card

This card is selectable.
View HTML Source 
<pf-v6-card selectable accessible-label="First card">
  <h2 slot="header">First card</h2>
  <pf-v6-card-body>This card is selectable.</pf-v6-card-body>
</pf-v6-card>

Actionable

An actionable card performs an action or navigates to a link when clicked. Set href to render a link.

View details

This card is a link.
View HTML Source 
<pf-v6-card clickable href="#" accessible-label="View details">
  <h2 slot="header">View details</h2>
  <pf-v6-card-body>This card is a link.</pf-v6-card-body>
</pf-v6-card>

Expandable

An expandable card shows a toggle in the header. Content in the expandable-content slot is hidden until the card is expanded.

Title

Body
View HTML Source 
<pf-v6-card expandable accessible-label="Title">
  <h2 slot="header">Title</h2>
  <div slot="expandable-content">
    <pf-v6-card-body>Body</pf-v6-card-body>
  </div>
</pf-v6-card>

Multiple body sections

Use pf-v6-card-body for each body section. Set no-fill to prevent a section from growing to fill the card.

Title

Body Secondary body
View HTML Source 
<pf-v6-card>
  <h2 slot="title">Title</h2>
  <pf-v6-card-body>Body</pf-v6-card-body>
  <pf-v6-card-body no-fill>Secondary body</pf-v6-card-body>
</pf-v6-card>

Slots

header

Header content such as an image, a brand, or an inline heading (inline or block elements). Selectable and clickable cards need an accessible name from accessible-label, a heading, or image alt text.

actions

Interactive controls such as buttons, links, or inputs. Avoid other interactive content in actionable-only and selectable-only cards; screen reader users must be able to reach each control.

title

The card title as inline text in a heading element (<h2>–<h6>) so it appears in the document outline.

subtitle

Short inline text displayed beneath the title.

Default Slot

Card body content as block elements. Use pf-v6-card-body for body sections; wrap inline text in a block element so it receives body spacing.

expandable-content

Block elements revealed when the card is expanded, typically one or more pf-v6-card-body elements.

footer

Inline text or inline elements such as links or actions.

Attributes

variant

Visual variant of the card.

DOM Property
variant
Type
'default' | 'secondary'
Default
unknown
size

Controls the spacing and typography of the card.

DOM Property
size
Type
'compact' | 'large'
Default
unknown
full-height

Allows the card to take up the full height of its parent.

DOM Property
fullHeight
Type
boolean
Default
false
plain

Removes the card background and border.

DOM Property
plain
Type
boolean
Default
false
glass

Applies glass styling to the card.

DOM Property
glass
Type
boolean
Default
false
selectable

Renders a checkbox or radio control, making the card selectable.

DOM Property
selectable
Type
boolean
Default
false
clickable

Makes the whole card a button or link. When combined with selectable, renders no overlay control, enables interactive content, and applies clickable styling. Actionable-only cards MUST NOT contain other interactive content; the overlay covers it for pointer users.

DOM Property
clickable
Type
boolean
Default
false
selected

Whether a selectable card is selected.

DOM Property
selected
Type
boolean
Default
false
clicked

Whether a clickable card is the currently clicked card.

DOM Property
clicked
Type
boolean
Default
false
disabled

Disables the card's own control. Slotted interactive content is not disabled; authors MUST disable or remove it from the tab order themselves.

DOM Property
disabled
Type
boolean
Default
false
expandable

Renders a toggle in the header which reveals the expandable content.

DOM Property
expandable
Type
boolean
Default
false
expanded

Whether an expandable card is expanded.

DOM Property
expanded
Type
boolean
Default
false
toggle-right

Aligns the expandable toggle at the end of the header.

DOM Property
toggleRight
Type
boolean
Default
false
header-wrap

Allows header content to wrap onto multiple rows.

DOM Property
headerWrap
Type
boolean
Default
false
no-offset

Removes the offset from header actions.

DOM Property
noOffset
Type
boolean
Default
false
hide-input

Hides the visible selectable control, for cards used as tiles.

DOM Property
hideInput
Type
boolean
Default
false
selection

Selects a checkbox (multiple) or radio (single) control.

DOM Property
selection
Type
'single' | 'multiple'
Default
'multiple'
accessible-label

Accessible name for the selectable, clickable, or expandable control. When omitted, the text of the title slot, a heading in the header slot, or the alt text of an image in the header slot is used. This MUST be set when none of those sources provides text.

DOM Property
accessibleLabel
Type
string
Default
unknown
name

Name of the form control, also used to group single-selection cards.

DOM Property
name
Type
string
Default
unknown
value

Value submitted when a selectable card is selected. Defaults to on.

DOM Property
value
Type
string
Default
unknown
href

When set on a clickable card, renders an anchor instead of a button.

DOM Property
href
Type
string
Default
unknown
target

Target for the clickable card's anchor.

DOM Property
target
Type
string
Default
unknown

Methods

formResetCallback()

Events

change

Fires before a user-driven selection change. Carries no detail object; read selected from the card. Not fired for programmatic changes to selected. Cancelable: call preventDefault() to reject the change.

Event Type: 
Event
expand

Fires before an expandable card expands. Carries no detail object. Cancelable: call preventDefault() to prevent expansion.

Event Type: 
Event
collapse

Fires before an expandable card collapses. Carries no detail object. Cancelable: call preventDefault() to prevent collapse.

Event Type: 
Event

CSS Shadow Parts

toggle

The expandable card toggle button

header

The card header container

actions

The card header actions container

footer

The card footer container

CSS Custom Properties

CSS Property Description Default
--pf-v6-c-card--BackgroundColor

Card background color

 var(--pf-t--global--background--color--primary--default, #ffffff)
--pf-v6-c-card--BorderColor

Card border color

 var(--pf-t--global--border--color--subtle, #e0e0e0)
--pf-v6-c-card--BorderStyle

Card border style

 solid
--pf-v6-c-card--BorderWidth

Card border width

 var(--pf-t--global--border--width--box--default, 1px)
--pf-v6-c-card--BorderRadius

Card border radius

 var(--pf-t--global--border--radius--medium, 16px)
--pf-v6-c-card--BoxShadow

Card box shadow; defaults to none, matching patternfly.org

 —
--pf-v6-c-card--first-child--PaddingBlockStart

Block-start padding of the first section; defaults to --pf-t--global--spacer--lg

 var(--pf-v6-c-card--m-display-lg--first-child--PaddingBlockStart, var(--pf-t--global--spacer--xl, 2rem))
--pf-v6-c-card--child--PaddingBlockEnd

Block-end padding of each section; defaults to --pf-t--global--spacer--lg

 var(--pf-t--global--spacer--lg, 1.5rem)
--pf-v6-c-card--child--PaddingInlineEnd

Inline-end padding of each section; defaults to --pf-t--global--spacer--lg

 var(--pf-t--global--spacer--lg, 1.5rem)
--pf-v6-c-card--child--PaddingInlineStart

Inline-start padding of each section; defaults to --pf-t--global--spacer--lg

 var(--pf-t--global--spacer--lg, 1.5rem)
--pf-v6-c-card--c-divider--child--PaddingBlockStart

Space after a divider between sections; defaults to --pf-t--global--spacer--lg

 var(--pf-t--global--spacer--lg, 1.5rem)
--pf-v6-c-card__title--not--last-child--PaddingBlockEnd

Block-end padding of the title; defaults to --pf-t--global--spacer--md

 var(--pf-t--global--spacer--md, 1rem)
--pf-v6-c-card__title-text--Color

Title text color; defaults to --pf-t--global--text--color--regular

 var(--pf-t--global--text--color--regular, #151515)
--pf-v6-c-card__title-text--FontFamily

Title font family; defaults to --pf-t--global--font--family--heading

 var(--pf-t--global--font--family--heading, "Red Hat Display", "RedHatDisplay", Helvetica, Arial, sans-serif)
--pf-v6-c-card__title-text--FontSize

Title font size; defaults to --pf-t--global--font--size--heading--xs

 var(--pf-t--global--font--size--heading--xs, 1rem)
--pf-v6-c-card__title-text--FontWeight

Title font weight; defaults to --pf-t--global--font--weight--heading--default

 var(--pf-t--global--font--weight--heading--default, 500)
--pf-v6-c-card__title-text--LineHeight

Title line height; defaults to --pf-t--global--font--line-height--heading

 var(--pf-t--global--font--line-height--heading, 1.3)
--pf-v6-c-card__title-text--OverflowWrap

Title overflow-wrap behavior

 break-word
--pf-v6-c-card__body--FontSize

Body font size; defaults to --pf-t--global--font--size--body--default

 var(--pf-t--global--font--size--body--default, 0.875rem)
--pf-v6-c-card__body--Color

Body text color; defaults to --pf-t--global--text--color--regular

 var(--pf-t--global--text--color--regular, #151515)
--pf-v6-c-card__footer--FontSize

Footer font size; defaults to --pf-t--global--font--size--body--default

 var(--pf-t--global--font--size--body--default, 0.875rem)
--pf-v6-c-card__footer--Color

Footer text color; defaults to --pf-t--global--text--color--subtle

 var(--pf-t--global--text--color--subtle, #4d4d4d)
--pf-v6-c-card__actions--PaddingInlineStart

Inline-start padding of the actions container; defaults to --pf-t--global--spacer--md

 var(--pf-t--global--spacer--md, 1rem)
--pf-v6-c-card__actions--Gap

Gap between header actions; defaults to --pf-t--global--spacer--gap--action-to-action--default

 var(--pf-t--global--spacer--gap--action-to-action--default, 1rem)
--pf-v6-c-card__actions--MarginBlockStart

Block-start margin of the actions container

 calc(var(--pf-t--global--spacer--control--vertical--default, 0.5rem) * -1)
--pf-v6-c-card__actions--MarginBlockEnd

Block-end margin of the actions container

 calc(var(--pf-t--global--spacer--control--vertical--default, 0.5rem) * -1)
--pf-v6-c-card__header--m-wrap--RowGap

Row gap when the header wraps

 var(--pf-t--global--spacer--sm, 0.5rem)
--pf-v6-c-card__header--m-wrap--ColumnGap

Column gap when the header wraps

 var(--pf-t--global--spacer--md, 1rem)
--pf-v6-c-card__header-toggle--MarginBlockStart

Toggle block-start margin

 calc(var(--pf-t--global--spacer--control--vertical--default, 0.5rem) * -1)
--pf-v6-c-card__header-toggle--MarginInlineEnd

Toggle inline-end margin

 var(--pf-t--global--spacer--gap--text-to-element--default, 0.5rem)
--pf-v6-c-card__header-toggle--MarginBlockEnd

Toggle block-end margin

 calc(var(--pf-t--global--spacer--control--vertical--default, 0.5rem) * -1)
--pf-v6-c-card__header-toggle--MarginInlineStart

Toggle inline-start margin

 calc(var(--pf-t--global--spacer--action--horizontal--plain--default, 0.5rem) * -1)
--pf-v6-c-card__header-toggle-icon--TransitionDuration

Toggle icon transition duration

 var(--pf-t--global--motion--duration--icon--default, 100ms)
--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction

Toggle icon transition timing function

 var(--pf-t--global--motion--timing-function--default, ease)
--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate

Toggle icon rotation when expanded

 -180deg
--pf-v6-c-card--m-selectable--BorderColor

Border color of selectable and clickable cards

 var(--pf-t--global--border--color--control--default, #d2d2d2)
--pf-v6-c-card--m-selectable--BorderWidth

Border width of selectable and clickable cards

 var(--pf-t--global--border--width--box--default, 1px)
--pf-v6-c-card--m-selectable--hover--BorderColor

Border color on hover

 var(--pf-t--global--border--color--hover, #0066cc)
--pf-v6-c-card--m-selectable--hover--BorderWidth

Border width on hover

 var(--pf-t--global--border--width--box--hover, 2px)
--pf-v6-c-card--m-selectable--focus--BorderColor

Border color on focus

 var(--pf-t--global--border--color--hover, #0066cc)
--pf-v6-c-card--m-selectable--focus--BorderWidth

Border width on focus

 var(--pf-t--global--border--width--box--hover, 2px)
--pf-v6-c-card--m-selectable--m-selected--BorderColor

Border color when selected

 var(--pf-t--global--border--color--clicked, #0066cc)
--pf-v6-c-card--m-selectable--m-selected--BorderWidth

Border width when selected

 var(--pf-t--global--border--width--box--clicked, 3px)
--pf-v6-c-card--m-clickable--m-current--BorderColor

Border color of the current clickable card

 var(--pf-t--global--border--color--clicked, #0066cc)
--pf-v6-c-card--m-clickable--m-current--BorderWidth

Border width of the current clickable card

 var(--pf-t--global--border--width--box--clicked, 3px)
--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor

Background color of a disabled selectable card

 var(--pf-t--global--background--color--disabled--default, #f2f2f2)
--pf-v6-c-card--m-selectable--m-disabled--BorderColor

Border color of a disabled selectable card

 transparent
--pf-v6-c-card--m-selectable--m-disabled__title-text--Color

Title color of a disabled selectable card

 var(--pf-t--global--text--color--on-disabled, #a3a3a3)
--pf-v6-c-card--m-selectable--m-disabled__body--Color

Body color of a disabled selectable card

 var(--pf-t--global--text--color--on-disabled, #a3a3a3)
--pf-v6-c-card--m-selectable--m-disabled__footer--Color

Footer color of a disabled selectable card

 var(--pf-t--global--text--color--on-disabled, #a3a3a3)
--pf-v6-c-card--m-compact--first-child--PaddingBlockStart

First section block-start padding when compact

 var(--pf-t--global--spacer--md, 1rem)
--pf-v6-c-card--m-compact--child--PaddingBlockEnd

Section block-end padding when compact

 var(--pf-t--global--spacer--md, 1rem)
--pf-v6-c-card--m-compact--child--PaddingInlineEnd

Section inline-end padding when compact

 var(--pf-t--global--spacer--md, 1rem)
--pf-v6-c-card--m-compact--child--PaddingInlineStart

Section inline-start padding when compact

 var(--pf-t--global--spacer--md, 1rem)
--pf-v6-c-card--m-compact--c-divider--child--PaddingBlockStart

Space after a divider when compact

 var(--pf-t--global--spacer--md, 1rem)
--pf-v6-c-card--m-compact__title--not--last-child--PaddingBlockEnd

Title block-end padding when compact

 var(--pf-t--global--spacer--sm, 0.5rem)
--pf-v6-c-card--m-compact__title-text--FontSize

Title font size when compact

 var(--pf-t--global--font--size--heading--xs, 1rem)
--pf-v6-c-card--m-compact__body--FontSize

Body font size when compact

 var(--pf-t--global--font--size--body--default, 0.875rem)
--pf-v6-c-card--m-compact__footer--FontSize

Footer font size when compact

 var(--pf-t--global--font--size--body--sm, 0.75rem)
--pf-v6-c-card--m-display-lg--first-child--PaddingBlockStart

First section block-start padding when large

 var(--pf-t--global--spacer--xl, 2rem)
--pf-v6-c-card--m-display-lg--child--PaddingBlockEnd

Section block-end padding when large

 var(--pf-t--global--spacer--xl, 2rem)
--pf-v6-c-card--m-display-lg--child--PaddingInlineEnd

Section inline-end padding when large

 var(--pf-t--global--spacer--xl, 2rem)
--pf-v6-c-card--m-display-lg--child--PaddingInlineStart

Section inline-start padding when large

 var(--pf-t--global--spacer--xl, 2rem)
--pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart

Space after a divider when large

 var(--pf-t--global--spacer--xl, 2rem)
--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd

Title block-end padding when large

 var(--pf-t--global--spacer--lg, 1.5rem)
--pf-v6-c-card--m-display-lg__title-text--FontSize

Title font size when large

 var(--pf-t--global--font--size--heading--md, 1.25rem)
--pf-v6-c-card--m-display-lg__body--FontSize

Body font size when large

 var(--pf-t--global--font--size--body--lg, 1rem)
--pf-v6-c-card--m-display-lg__footer--FontSize

Footer font size when large

 var(--pf-t--global--font--size--body--default, 0.875rem)
--pf-v6-c-card--m-secondary--BackgroundColor

Background color of a secondary card

 var(--pf-t--global--background--color--secondary--default, #f2f2f2)
--pf-v6-c-card--m-plain--BackgroundColor

Background color of a plain card

 transparent
--pf-v6-c-card--m-plain--BorderColor

Border color of a plain card

 transparent
--pf-v6-c-card--m-plain--BoxShadow

Box shadow of a plain card

 none
--pf-v6-c-card--m-full-height--Height

Height of a full-height card

 100%
--pf-v6-c-card--m-as-tile--BackgroundColor

Background color of a card used as a tile

 var(--pf-t--global--background--color--control--default, #ffffff)
--pf-v6-c-card--m-as-tile--BorderColor

Border color of a card used as a tile

 var(--pf-t--global--border--color--control--default, #d2d2d2)
--pf-v6-c-card--m-glass--BackgroundColor

Background color of a glass card

 var(--pf-t--global--background--color--glass--primary--default, rgba(255, 255, 255, 0.5))
--pf-v6-c-card--m-glass--BorderColor

Border color of a glass card

 var(--pf-t--global--border--color--glass--default, rgba(0, 0, 0, 0.1))
--pf-v6-c-card--m-glass--BorderWidth

Border width of a glass card

 var(--pf-t--global--border--width--glass--default, 1px)
--pf-v6-c-card--m-glass--BoxShadow

Box shadow of a glass card

 var(--pf-t--global--box-shadow--glass--default, none)
--pf-v6-c-card--m-glass--BackdropFilter

Backdrop filter of a glass card

 var(--pf-t--global--background--filter--glass--blur--primary, blur(16px))
--pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd

Toggle inline-end margin when right-aligned

 calc(var(--pf-t--global--spacer--action--horizontal--plain--default, 0.5rem) * -1)
--pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart

Toggle inline-start margin when right-aligned

 var(--pf-t--global--spacer--gap--text-to-element--default, 0.5rem)
--pf-v6-c-card--m-selectable--AccentColor

Accent color of the selectable control

 var(--pf-t--global--color--brand--default, #0066cc)
--pf-v6-c-card--m-selectable--m-selected--focus--BorderColor

Border color of a focused selected card

 var(--pf-t--global--border--color--clicked, #0066cc)
--pf-v6-c-card--m-selectable--m-selected--focus--BorderWidth

Border width of a focused selected card

 var(--pf-t--global--border--width--box--clicked, 3px)
--pf-t--global--background--color--primary--default #ffffff
--pf-t--global--border--color--subtle #e0e0e0
--pf-t--global--border--radius--medium 16px
--pf-t--global--font--family--heading "Red Hat Display", "RedHatDisplay", Helvetica, Arial, sans-serif
--pf-t--global--font--weight--heading--default 500
--pf-t--global--font--line-height--heading 1.3
--pf-t--global--text--color--regular #151515
--pf-t--global--spacer--gap--action-to-action--default 1rem
--pf-t--global--spacer--control--vertical--default 0.5rem
--pf-t--global--motion--timing-function--default ease
--pf-t--global--motion--duration--icon--default 100ms
--pf-t--global--spacer--md 1rem
--pf-t--global--font--size--heading--xs 1rem
--pf-t--global--spacer--xl 2rem
--pf-t--global--spacer--lg 1.5rem
--pf-t--global--font--size--heading--md 1.25rem
--pf-t--global--font--size--body--lg 1rem
--pf-t--global--font--size--body--default 0.875rem
--pf-t--global--background--color--secondary--default #f2f2f2
--pf-t--global--background--color--glass--primary--default rgba(255, 255, 255, 0.5)
--pf-t--global--border--color--glass--default rgba(0, 0, 0, 0.1)
--pf-t--global--border--width--glass--default 1px
--pf-t--global--box-shadow--glass--default none
--pf-t--global--background--filter--glass--blur--primary blur(16px)
--pf-t--global--border--width--box--default 1px
--pf-t--global--background--color--control--default #ffffff
--pf-t--global--border--color--control--default #d2d2d2
--pf-t--global--border--width--box--clicked 3px
--pf-t--global--border--color--clicked #0066cc
--pf-t--global--background--color--disabled--default #f2f2f2
--pf-t--global--text--color--on-disabled #a3a3a3
--pf-t--global--spacer--action--horizontal--plain--default 0.5rem
--pf-t--global--spacer--gap--text-to-element--default 0.5rem
--pf-t--global--border--radius--small 4px
--pf-t--global--color--brand--default #0066cc
--pf-t--global--border--width--box--hover 2px
--pf-t--global--border--color--hover #0066cc
--pf-v6-c-divider--BorderWidth var(--pf-t--global--border--width--divider--default, 1px)
--pf-t--global--border--width--divider--default 1px
--pf-v6-c-divider--BorderColor var(--pf-t--global--border--color--default, #d2d2d2)
--pf-t--global--border--color--default #d2d2d2
--pf-t--global--spacer--sm 0.5rem
--pf-t--global--font--size--body--sm 0.75rem
--pf-t--global--text--color--subtle #4d4d4d
© 2018-2026 Red Hat, Inc. Deploys by Netlify