Examples
With title in head
This is a really really really really really really really really really really long 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.
Usage
Class | Applied | Outcome |
|---|---|---|
.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__header-toggle | <div> | Creates the expandable card toggle. |
.pf-c-card__header-toggle-icon | <span> | Creates the expandable card toggle icon. |
.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-c-card__expandable-content | <div> | Creates the expandable card's expandable content. |
.pf-c-card__sr-input | <input> | Creates an input which, when focused, makes a following .pf-c-card appear focused. |
.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-display-lg | .pf-c-card | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
.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-raised | .pf-c-card | Modifies the card to include hover styles on :hover. |
.pf-m-selectable-raised | .pf-c-card | Modifies a selectable card so that it is selectable. |
.pf-m-selected-raised | .pf-c-card.pf-m-selectable-raised | Modifies a selectable card for the selected state. |
.pf-m-non-selectable-raised | .pf-c-card | Modifies a selectable card so that it is not selectable. |
.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. |
.pf-m-rounded | .pf-c-card | Modifies the card to have rounded corners. |
.pf-m-plain | .pf-c-card | Modifies the card to have no box shadow and no background color. |
.pf-m-expanded | .pf-c-card | Modifies the card for the expanded state. |
.pf-m-toggle-right | .pf-c-card__header | Modifies the expandable card header toggle to be positioned at flex-end. |
.pf-m-full-height | .pf-c-card | Modifies the card to full height of its parent. |
.pf-m-no-offset | .pf-c-card__actions | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |
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--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--c-divider--child--PaddingTop | 1.5rem | ||
| .pf-c-card | --pf-c-card__title--FontFamily | '"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif' | ||
| .pf-c-card | --pf-c-card__title--FontSize | 1rem | ||
| .pf-c-card | --pf-c-card__title--FontWeight | 700 | ||
| .pf-c-card | --pf-c-card__title--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-c-card__header-toggle--MarginTop | calc(0.375rem * -1) | ||
| .pf-c-card | --pf-c-card__header-toggle--MarginRight | 0.25rem | ||
| .pf-c-card | --pf-c-card__header-toggle--MarginBottom | calc(0.375rem * -1) | ||
| .pf-c-card | --pf-c-card__header-toggle--MarginLeft | calc(1rem * -1) | ||
| .pf-c-card | --pf-c-card__header-toggle-icon--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
| .pf-c-card | --pf-c-card--m-expanded__header-toggle-icon--Rotate | 90deg | ||
| .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-hoverable-raised--hover--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||
| .pf-c-card | --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor | #73bcf7 | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--before--Right | 0 | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--before--Bottom | 0 | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--before--Left | 0 | ||
| .pf-c-card | --pf-c-card--m-flat--m-selectable-raised--before--Right | calc(-1 * 1px) | ||
| .pf-c-card | --pf-c-card--m-flat--m-selectable-raised--before--Bottom | calc(-1 * 1px) | ||
| .pf-c-card | --pf-c-card--m-flat--m-selectable-raised--before--Left | calc(-1 * 1px) | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--before--Height | 4px | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--before--BackgroundColor | transparent | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--before--Transition | none | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--before--ScaleY | 1 | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--before--TranslateY | 0 | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--hover--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--hover--before--BackgroundColor | #73bcf7 | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--focus--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--focus--before--BackgroundColor | #73bcf7 | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--active--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--active--before--BackgroundColor | #73bcf7 | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor | #06c | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--m-selected-raised--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-raised--m-selected-raised--TranslateY--base | -0.5rem | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY | -0.5rem | ||
| .pf-c-card | --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY | calc(-0.5rem + 1px) | ||
| .pf-c-card | --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY | calc(-0.5rem + 3px) | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--m-selected-raised--ZIndex | 100 | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--m-selected-raised--Transition | transform .25s linear, box-shadow .25s linear | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition | transform .25s linear | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY | calc(-0.5rem * -1) | ||
| .pf-c-card | --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY | 2 | ||
| .pf-c-card | --pf-c-card--m-non-selectable-raised--BackgroundColor | #fafafa | ||
| .pf-c-card | --pf-c-card--m-non-selectable-raised--before--BackgroundColor | #d2d2d2 | ||
| .pf-c-card | --pf-c-card--m-non-selectable-raised--before--ScaleY | 2 | ||
| .pf-c-card | --pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor | #d2d2d2 | ||
| .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--c-divider--child--PaddingTop | 1rem | ||
| .pf-c-card | --pf-c-card--m-compact__title--not--last-child--PaddingBottom | 0.5rem | ||
| .pf-c-card | --pf-c-card--m-display-lg__title--FontSize | 1.25rem | ||
| .pf-c-card | --pf-c-card--m-display-lg--first-child--PaddingTop | 2rem | ||
| .pf-c-card | --pf-c-card--m-display-lg--child--PaddingRight | 2rem | ||
| .pf-c-card | --pf-c-card--m-display-lg--child--PaddingBottom | 2rem | ||
| .pf-c-card | --pf-c-card--m-display-lg--child--PaddingLeft | 2rem | ||
| .pf-c-card | --pf-c-card--m-display-lg--c-divider--child--PaddingTop | 2rem | ||
| .pf-c-card | --pf-c-card--m-display-lg__title--not--last-child--PaddingBottom | 1.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--m-rounded--BorderRadius | 3px | ||
| .pf-c-card | --pf-c-card--m-full-height--Height | 100% | ||
| .pf-c-card | --pf-c-card--m-plain--BoxShadow | none | ||
| .pf-c-card | --pf-c-card--m-plain--BackgroundColor | transparent | ||
| .pf-c-card | --pf-c-card__header--m-toggle-right--toggle--MarginRight | calc(0.375rem * -1) | ||
| .pf-c-card | --pf-c-card__header--m-toggle-right--toggle--MarginLeft | 0.25rem | ||
| .pf-c-card | --pf-c-card__header--m-toggle-right--actions--MarginRight | 0 | ||
| .pf-c-card | --pf-c-card__input--focus--BorderWidth | 2px | ||
| .pf-c-card | --pf-c-card__input--focus--BorderColor | #06c | ||
| .pf-c-card.pf-m-hoverable-raised:hover | --pf-c-card--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||
| .pf-c-card.pf-m-hoverable-raised:hover | --pf-c-card--m-selectable-raised--before--BackgroundColor | #73bcf7 | ||
| .pf-c-card.pf-m-selectable-raised:hover | --pf-c-card--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||
| .pf-c-card.pf-m-selectable-raised:hover | --pf-c-card--m-selectable-raised--before--BackgroundColor | #73bcf7 | ||
| .pf-c-card.pf-m-selectable-raised:focus | --pf-c-card--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||
| .pf-c-card.pf-m-selectable-raised:focus | --pf-c-card--m-selectable-raised--before--BackgroundColor | #73bcf7 | ||
| .pf-c-card.pf-m-selectable-raised:active | --pf-c-card--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||
| .pf-c-card.pf-m-selectable-raised:active | --pf-c-card--m-selectable-raised--before--BackgroundColor | #73bcf7 | ||
| .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised | --pf-c-card--m-selectable-raised--before--BackgroundColor | #06c | ||
| .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised | --pf-c-card--m-selectable-raised--before--Transition | transform .25s linear | ||
| .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised | --pf-c-card--m-selectable-raised--before--TranslateY | calc(-0.5rem * -1) | ||
| .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised | --pf-c-card--m-selectable-raised--before--ScaleY | 2 | ||
| .pf-c-card.pf-m-non-selectable-raised | --pf-c-card--BackgroundColor | #fafafa | ||
| .pf-c-card.pf-m-non-selectable-raised | --pf-c-card--BoxShadow | none | ||
| .pf-c-card.pf-m-non-selectable-raised | --pf-c-card--m-flat--BorderColor | #d2d2d2 | ||
| .pf-c-card.pf-m-non-selectable-raised | --pf-c-card--m-selectable-raised--before--BackgroundColor | #d2d2d2 | ||
| .pf-c-card.pf-m-non-selectable-raised | --pf-c-card--m-selectable-raised--before--ScaleY | 2 | ||
| .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--c-divider--child--PaddingTop | 1rem | ||
| .pf-c-card.pf-m-compact | --pf-c-card__title--not--last-child--PaddingBottom | 0.5rem | ||
| .pf-c-card.pf-m-display-lg | --pf-c-card__title--FontSize | 1.25rem | ||
| .pf-c-card.pf-m-display-lg | --pf-c-card--first-child--PaddingTop | 2rem | ||
| .pf-c-card.pf-m-display-lg | --pf-c-card--child--PaddingRight | 2rem | ||
| .pf-c-card.pf-m-display-lg | --pf-c-card--child--PaddingBottom | 2rem | ||
| .pf-c-card.pf-m-display-lg | --pf-c-card--child--PaddingLeft | 2rem | ||
| .pf-c-card.pf-m-display-lg | --pf-c-card--c-divider--child--PaddingTop | 2rem | ||
| .pf-c-card.pf-m-display-lg | --pf-c-card__title--not--last-child--PaddingBottom | 1.5rem | ||
| .pf-c-card.pf-m-flat | --pf-c-card--BoxShadow | none | ||
| .pf-c-card.pf-m-flat | --pf-c-card--m-selectable-raised--before--Right | calc(-1 * 1px) | ||
| .pf-c-card.pf-m-flat | --pf-c-card--m-selectable-raised--before--Bottom | calc(-1 * 1px) | ||
| .pf-c-card.pf-m-flat | --pf-c-card--m-selectable-raised--before--Left | calc(-1 * 1px) | ||
| .pf-c-card.pf-m-flat | --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY | calc(-0.5rem + 1px) | ||
| .pf-c-card.pf-m-plain | --pf-c-card--BoxShadow | none | ||
| .pf-c-card.pf-m-plain | --pf-c-card--BackgroundColor | transparent | ||
| .pf-c-card.pf-m-rounded | --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY | calc(-0.5rem + 3px) | ||
| .pf-c-card__header .pf-c-card__title | --pf-c-card--first-child--PaddingTop | 0 | ||
| .pf-c-card__header .pf-c-card__title | --pf-c-card__title--not--last-child--PaddingBottom | 0 | ||
| .pf-c-card__header.pf-m-toggle-right | --pf-c-card__header-toggle--MarginRight | calc(0.375rem * -1) | ||
| .pf-c-card__header.pf-m-toggle-right | --pf-c-card__header-toggle--MarginLeft | 0.25rem | ||
| .pf-c-card__header.pf-m-toggle-right .pf-c-card__actions | --pf-c-card__header-toggle--MarginRight | 0 | ||
| .pf-c-card__actions.pf-m-no-offset | --pf-c-card__header-toggle--MarginTop | 0 | ||
| .pf-c-card__actions.pf-m-no-offset | --pf-c-card__header-toggle--MarginBottom | 0 | ||
| .pf-c-card__expandable-content | --pf-c-card--first-child--PaddingTop | 0 | ||
View source on GitHub