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.
Legacy 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.
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 |
| 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 |
| ouiaSafe | No type info | true |
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
