Skip to content
Patternfly Logo

Card

Examples

Basic

Title
Body

With image and action

Logo
Title
Body

With title in head

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

With only actions in head (no title/footer)

This is the card body, there are only actions in the card head.

With only image in head

Logo
Title
Body

With no title

This card has no title

With only a content section

Body

With multiple body sections

Title
Body
Body
Body

With only one body that fills

Title
Body pf-m-no-fill
Body pf-m-no-fill
Body

Compact

Title
Body

Large

Title
Body

Hover

Title
Body

Selectable

Title
Body

Selected

Title
Body

Flat

Title
Body

Rounded

Title
Body

Plain

Title
Body

Expandable

Title

Expandable with image

PatternFly logo

Expanded

Title
Body

Full height card

Title
Body

Expandable toggle on right

Title

Card with dividers between sections

Title

Body

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.

Accessibility

Attribute
Applied to
Outcome
tabindex="0"
.pf-c-card.pf-m-selectable
Inserts the selectable card into the tab order of the page so that it is focusable. Required

Usage

Class
Applied
Outcome
.pf-c-card
<div>
Creates a card component. Required
.pf-c-card__title
<div>
Creates the title of a card.
.pf-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-c-card__body elements.
.pf-c-card__footer
<div>
Creates the footer of a card.
.pf-c-card__header
<div>
Creates the header of the card where images, actions, and/or the card title can go.
.pf-c-card__header-toggle
<div>
Creates the expandable card toggle.
.pf-c-card__header-toggle-icon
<span>
Creates the expandable card toggle icon.
.pf-c-card__actions
<div>
Creates an actions element to be used in the card header.
.pf-c-card__header-main
<div>
Creates a wrapper element to be used in the card header when using an image, logo, or text.
.pf-c-card__expandable-content
<div>
Creates the expandable card's expandable content.
.pf-m-compact
.pf-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-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-c-card__body
Sets a .pf-c-card__body to not fill the available space in .pf-c-card. .pf-m-no-fill can be added to multiple card bodies.
.pf-m-hoverable
.pf-c-card
Modifies the card to include hover styles on :hover.
.pf-m-selectable
.pf-c-card
Modifies a selectable card so that it is selectable.
.pf-m-selected
.pf-c-card.pf-m-selectable
Modifies a selectable card for the selected state.
.pf-m-flat
.pf-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-c-card
Modifies the card to have rounded corners.
.pf-m-plain
.pf-c-card
Modifies the card to have no box shadow and no background color.
.pf-m-expanded
.pf-c-card
Modifies the card for the expanded state.
.pf-m-toggle-right
.pf-c-card__header
Modifies the expandable card header toggle to be positioned at flex-end.
.pf-m-full-height
.pf-c-card
Modifies the card to full height of its parent.

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-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
.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
.pf-c-card__expandable-content--pf-c-card--first-child--PaddingTop
0

View source on GitHub