HTML

Card

ExamplesDocumentationCSS variables

Examples

Card

Copied to clipboard

Card with image and action

Copied to clipboard
Copied to clipboard

Card with no header

Copied to clipboard

Card with only a content section

Copied to clipboard

Card with multiple body sections

Copied to clipboard

Card with only one body that fills

Copied to clipboard

Card compact example

Copied to clipboard

Card hover example

Copied to clipboard

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-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-card Creates a compact variation of the card component that involves smaller font sizes and spacing.
.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.

CSS variables

--pf-c-card--BackgroundColorc_card_BackgroundColorrgba(3,3,3,.32)
--pf-c-card--BoxShadowc_card_BoxShadow0 0.0625rem 0.125rem 0 rgba(3,3,3,.2)
--pf-c-card__actions--PaddingLeftc_card__actions_PaddingLeft1rem
--pf-c-card__actions--child--MarginLeftc_card__actions_child_MarginLeft0.5rem
--pf-c-card__body--FontSizec_card__body_FontSize0.875rem
--pf-c-card__footer--FontSizec_card__footer_FontSize0.875rem
--pf-c-card__header--not-last-child--PaddingBottomc_card__header_not_last_child_PaddingBottom0.5rem
--pf-c-card--child--PaddingBottomc_card_child_PaddingBottom1rem
--pf-c-card--child--PaddingLeftc_card_child_PaddingLeft1rem
--pf-c-card--child--PaddingRightc_card_child_PaddingRight1rem
--pf-c-card--first-child--PaddingTopc_card_first_child_PaddingTop1rem
--pf-c-card--m-compact__body--FontSizec_card_m_compact__body_FontSize0.875rem
--pf-c-card--m-compact__footer--FontSizec_card_m_compact__footer_FontSize0.875rem
--pf-c-card--m-compact__header--not-last-child--PaddingBottomc_card_m_compact__header_not_last_child_PaddingBottom0.5rem
--pf-c-card--m-compact--child--PaddingBottomc_card_m_compact_child_PaddingBottom1rem
--pf-c-card--m-compact--child--PaddingLeftc_card_m_compact_child_PaddingLeft1rem
--pf-c-card--m-compact--child--PaddingRightc_card_m_compact_child_PaddingRight1rem
--pf-c-card--m-compact--first-child--PaddingTopc_card_m_compact_first_child_PaddingTop1rem
--pf-c-card--m-hoverable--hover--BoxShadowc_card_m_hoverable_hover_BoxShadow0 0.1875rem 0.4375rem 0.1875rem rgba(3,3,3,.13),0 0.6875rem 1.5rem 1rem rgba(3,3,3,.12)