Skip to Content
Patternfly Logo

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.

ExamplesDocumentationCSS Variables

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

Hover

Title
Body

Selectable

Title
Body

Selected

Title
Body

Flat

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.

Accessibility

AttributeApplied toOutcome
tabindex="0".pf-c-card.pf-m-selectableInserts the selectable card into the tab order of the page so that it is focusable. Required

Usage

ClassAppliedOutcome
.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__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-m-compact.pf-c-cardCreates 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-no-fill.pf-c-card__bodySets 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-cardModifies the card to include hover styles on :hover.
.pf-m-selectable.pf-c-cardModifies a selectable card so that it is selectable.
.pf-m-selected.pf-c-card.pf-m-selectableModifies a selectable card for the selected state.
.pf-m-flat.pf-c-cardModifies 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.

CSS Variables

.pf-c-card--pf-c-card--BackgroundColorc_card_BackgroundColor
#fff
.pf-c-card--pf-c-card--BoxShadowc_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--BoxShadowc_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--BoxShadowc_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--BoxShadowc_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--BoxShadowc_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--BoxShadowc_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--Heightc_card_m_selectable_m_selected_before_Height
3px
.pf-c-card--pf-c-card--m-selectable--m-selected--before--BackgroundColorc_card_m_selectable_m_selected_before_BackgroundColor
#06c
.pf-c-card--pf-c-card--m-compact__body--FontSizec_card_m_compact__body_FontSize
0.875rem
.pf-c-card--pf-c-card--m-compact__footer--FontSizec_card_m_compact__footer_FontSize
0.875rem
.pf-c-card--pf-c-card--m-compact--first-child--PaddingTopc_card_m_compact_first_child_PaddingTop
1rem
.pf-c-card--pf-c-card--m-compact--child--PaddingRightc_card_m_compact_child_PaddingRight
1rem
.pf-c-card--pf-c-card--m-compact--child--PaddingBottomc_card_m_compact_child_PaddingBottom
1rem
.pf-c-card--pf-c-card--m-compact--child--PaddingLeftc_card_m_compact_child_PaddingLeft
1rem
.pf-c-card--pf-c-card--m-compact__title--not--last-child--PaddingBottomc_card_m_compact__title_not_last_child_PaddingBottom
0.5rem
.pf-c-card--pf-c-card--m-flat--BorderWidthc_card_m_flat_BorderWidth
1px
.pf-c-card--pf-c-card--m-flat--BorderColorc_card_m_flat_BorderColor
#d2d2d2
.pf-c-card--pf-c-card--first-child--PaddingTopc_card_first_child_PaddingTop
1.5rem
.pf-c-card--pf-c-card--child--PaddingRightc_card_child_PaddingRight
1.5rem
.pf-c-card--pf-c-card--child--PaddingBottomc_card_child_PaddingBottom
1.5rem
.pf-c-card--pf-c-card--child--PaddingLeftc_card_child_PaddingLeft
1.5rem
.pf-c-card--pf-c-card__title--FontSizec_card__title_FontSize
1rem
.pf-c-card--pf-c-card__title--FontWeightc_card__title_FontWeight
700
.pf-c-card--pf-c-card__title--not--last-child--PaddingBottomc_card__title_not_last_child_PaddingBottom
1rem
.pf-c-card--pf-c-card__body--FontSizec_card__body_FontSize
1rem
.pf-c-card--pf-c-card__footer--FontSizec_card__footer_FontSize
1rem
.pf-c-card--pf-c-card__actions--PaddingLeftc_card__actions_PaddingLeft
1rem
.pf-c-card--pf-c-card__actions--child--MarginLeftc_card__actions_child_MarginLeft
0.5rem
.pf-c-card.pf-m-compact--pf-c-card__body--FontSizec_card__body_FontSize
0.875rem
.pf-c-card.pf-m-compact--pf-c-card__footer--FontSizec_card__footer_FontSize
0.875rem
.pf-c-card.pf-m-compact--pf-c-card--first-child--PaddingTopc_card_first_child_PaddingTop
1rem
.pf-c-card.pf-m-compact--pf-c-card--child--PaddingRightc_card_child_PaddingRight
1rem
.pf-c-card.pf-m-compact--pf-c-card--child--PaddingBottomc_card_child_PaddingBottom
1rem
.pf-c-card.pf-m-compact--pf-c-card--child--PaddingLeftc_card_child_PaddingLeft
1rem
.pf-c-card.pf-m-compact--pf-c-card__title--not--last-child--PaddingBottomc_card__title_not_last_child_PaddingBottom
0.5rem
.pf-c-card.pf-m-flat--pf-c-card--BoxShadowc_card_BoxShadow
none