HTML

Card

ExamplesDocumentationCSS Variables

Examples

Basic

Header
Body
Footer

With image and action

img goes here
Header
Body
Footer

With header in head

This is a really really really really really really really really really really long header
Body
Footer

With only actions in head (no header/footer)

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

With only image in head

img goes here
Header
Body
Footer
Header
This card has no footer

With no header

This card has no header
Footer

With only a content section

Body

With multiple body sections

Header
Body
Body
Body
Footer

With only one body that fills

Header
Body pf-m-no-fill
Body pf-m-no-fill
Body
Footer

Compact

Header
Body
Footer

Hover

Header
Body
Footer

Selectable

Header
Body
Footer

Selected

Header
Body
Footer

Documentation

Overiew

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 containing content. Required
.pf-c-card__header<div>Creates the header 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__head<div>Creates the head of the card where images or actions can go.
.pf-c-card__actions<div>Creates an actions element to be used in the card head.
.pf-m-compact.pf-c-cardCreates a compact variation of the card component that involves smaller font sizes and spacing.
.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.

CSS Variables

--pf-c-card__actions--child--MarginLeftc_card__actions_child_MarginLeft
0.5rem
--pf-c-card__actions--PaddingLeftc_card__actions_PaddingLeft
1rem
--pf-c-card__body--FontSizec_card__body_FontSize
0.875rem
--pf-c-card__footer--FontSizec_card__footer_FontSize
0.875rem
--pf-c-card__header--not-last-child--PaddingBottomc_card__header_not_last_child_PaddingBottom
0.5rem
--pf-c-card--BackgroundColorc_card_BackgroundColor
#fff
--pf-c-card--BoxShadowc_card_BoxShadow
0 0.0625rem 0.125rem 0 rgba(3,3,3,0.2)
--pf-c-card--child--PaddingBottomc_card_child_PaddingBottom
1rem
--pf-c-card--child--PaddingLeftc_card_child_PaddingLeft
1rem
--pf-c-card--child--PaddingRightc_card_child_PaddingRight
1rem
--pf-c-card--first-child--PaddingTopc_card_first_child_PaddingTop
1rem
--pf-c-card--m-compact__body--FontSizec_card_m_compact__body_FontSize
0.875rem
--pf-c-card--m-compact__footer--FontSizec_card_m_compact__footer_FontSize
0.875rem
--pf-c-card--m-compact__header--not-last-child--PaddingBottomc_card_m_compact__header_not_last_child_PaddingBottom
0.5rem
--pf-c-card--m-compact--child--PaddingBottomc_card_m_compact_child_PaddingBottom
1rem
--pf-c-card--m-compact--child--PaddingLeftc_card_m_compact_child_PaddingLeft
1rem
--pf-c-card--m-compact--child--PaddingRightc_card_m_compact_child_PaddingRight
1rem
--pf-c-card--m-compact--first-child--PaddingTopc_card_m_compact_first_child_PaddingTop
1rem
--pf-c-card--m-hoverable--hover--BoxShadowc_card_m_hoverable_hover_BoxShadow
0 0.1875rem 0.4375rem 0.1875rem rgba(3,3,3,0.13),0 0.6875rem 1.5rem 1rem rgba(3,3,3,0.12)