HTML

Card

ExamplesDocumentationCSS Variables

Examples

Card

Header
Body
Copied to clipboard

Card with image and action

Example with image and actions in card head
img goes here
Header
Body


Example with card header in card head
This is a really really really really really really really really really really long header
Body


Example with only actions in card head (no header/footer)
This is the card body, there is only actions in the card head.


Example with only image in the card head
img goes here
Header
Body
Copied to clipboard
Header
This card has no footer
Copied to clipboard

Card with no header

This card has no header
Copied to clipboard

Card with only a content section

Body
Copied to clipboard

Card with multiple body sections

Header
Body
Body
Body
Copied to clipboard

Card with only one body that fills

Header
Body pf-m-no-fill
Body pf-m-no-fill
Body
Copied to clipboard

Card hover example

Header
Body
Copied to clipboard

Documentation

Overview

A card is a generic rectangular container that can be used to build other components.

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-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__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_PaddingBottom1rem
--pf-c-card--child--PaddingBottomc_card_child_PaddingBottom1.5rem
--pf-c-card--child--PaddingLeftc_card_child_PaddingLeft1.5rem
--pf-c-card--child--PaddingRightc_card_child_PaddingRight1.5rem
--pf-c-card--first-child--PaddingTopc_card_first_child_PaddingTop1.5rem
--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)