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 VariablesExamples
With header in head
This is a really really really really really really really really really really long header
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__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-c-card__head-main | <div> | Creates a wrapper element to be used in the card head when using an image, logo or text. |
.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-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. |
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__header--not--last-child--PaddingBottom | 0.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--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__header--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-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__header--not--last-child--PaddingBottom | 0.5rem | ||
| .pf-c-card.pf-m-flat | --pf-c-card--BoxShadow | none | ||
