Header
Body
Examples
Header in card head
This is a really really really really really really really really really really long header
Body
Selectable
First card
This is a selectable card. Click me to select me. Click again to deselect me.
Second card
This is a selectable card. Click me to select me. Click again to deselect me.
Third card
This is a raised but disabled card.
Selectable accessibility highlight
This example demonstrates how the hasSelectableInput and onSelectableInputChange props improve accessibility for selectable cards.
The first card sets hasSelectableInput to true, which renders a checkbox input that is only visible to, and navigable by, screen readers. This input communicates to assistive technology users that a card is selectable, and if so, it communicates the current selection state as well.
By default this input will have an aria-label that corresponds to the title given to the card if using the card title component. If you don't use the card title component in your selectable card, you must pass a custom aria-label for this input using the selectableInputAriaLabel prop.
The first card also (by passing an onchange callback to onSelectableInputChange) enables the selection/deselection of the associated card by checking/unchecking the checkbox input.
The second card does not set hasSelectableInput to true, so the input is not rendered. It does not communicate to screen reader users that it is selectable or if it is currently selected.
To best understand this example it is encouraged that you navigate both of these cards using a screen reader.
Selectable card with proper accessibility considerations
When using a screen reader a checkbox will become navigable that indicates this card is selectable and communicate if it is currently selected.
Selectable card without proper accessibility considerations
When using a screen reader there are no indications that this card is selectable or if it is currently selected.
Legacy selectable
First legacy selectable card
This is a selectable card. Click me to select me. Click again to deselect me.
Second legacy selectable card
This is a selectable card. Click me to select me. Click again to deselect me.
Props
Card
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content rendered inside the Card |
| className | string | '' | Additional classes added to the Card |
| component | unknown | 'article' | Sets the base component to render. defaults to article |
| hasSelectableInput | boolean | false | Flag indicating that the card should render a hidden input to make it selectable |
| id | string | '' | ID of the Card. Also passed back in the CardHeader onExpand callback. |
| isCompact | boolean | false | Modifies the card to include compact styling. Should not be used with isLarge. |
| isDisabledRaisedBeta | boolean | false | Modifies a raised selectable card to have disabled styling |
| isExpanded | boolean | false | Flag indicating if a card is expanded. Modifies the card to be expandable. |
| isFlat | boolean | false | Modifies the card to include flat styling |
| isFullHeight | boolean | false | Cause component to consume the available height of its container |
| Deprecated: isHoverable | boolean | false | to make a card hoverable, use isSelectable or isSelectableRaised. |
| isLarge | boolean | false | Modifies the card to be large. Should not be used with isCompact. |
| isPlain | boolean | false | Modifies the card to include plain styling; this removes border and background |
| isRounded | boolean | false | Modifies the card to include rounded styling |
| isSelectable | boolean | false | Modifies the card to include selectable styling |
| isSelectableRaisedBeta | boolean | false | Specifies the card is selectable, and applies the new raised styling on hover and select |
| isSelected | boolean | false | Modifies the card to include selected styling |
| onSelectableInputChange | (labelledBy: string, event: React.FormEvent<HTMLInputElement>) => void | () => {} | Callback that executes when the selectable input is changed |
| ouiaSafe | No type info | true | |
| selectableInputAriaLabel | string | Aria label to apply to the selectable input if one is rendered |
CardActions
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content rendered inside the Card Action |
| className | string | '' | Additional classes added to the Action |
| hasNoOffset | boolean | false | Flag indicating that the actions have no offset |
CardHeader
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content rendered inside the CardHeader |
| className | string | '' | Additional classes added to the CardHeader |
| id | string | ID of the card header. | |
| isToggleRightAligned | boolean | Whether to right-align expandable toggle button | |
| onExpand | (event: React.MouseEvent, id: string) => void | Callback expandable card | |
| toggleButtonProps | any | Additional props for expandable toggle button |
CardHeaderMain
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content rendered inside the Card Head Main |
| className | string | '' | Additional classes added to the Card Head Main |
CardTitle
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content rendered inside the CardTitle |
| className | string | '' | Additional classes added to the CardTitle |
| component | unknown | 'div' | Sets the base component to render. defaults to div |
CardBody
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content rendered inside the Card Body |
| className | string | '' | Additional classes added to the Card Body |
| component | unknown | 'div' | Sets the base component to render. defaults to div |
| isFilled | boolean | true | Enables the body Content to fill the height of the card |
CardFooter
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content rendered inside the Card Footer |
| className | string | '' | Additional classes added to the Footer |
| component | unknown | 'div' | Sets the base component to render. defaults to div |
CardExpandableContent
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content rendered inside the Card Body |
| className | string | '' | Additional classes added to the Card Body |
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--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-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
