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-v6-c-card | <div> | Creates a card component. Required |
.pf-v6-c-card__title | <div> | Creates a card title container. |
.pf-v6-c-card__title-text | <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <div> | Creates a card title text element. |
.pf-v6-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-v6-c-card__body elements. |
.pf-v6-c-card__footer | <div> | Creates the footer of a card. |
.pf-v6-c-card__header | <div> | Creates the header of the card where images, actions, and/or the card title can go. |
.pf-v6-c-card__header-toggle | <div> | Creates the expandable card toggle. |
.pf-v6-c-card__header-toggle-icon | <span> | Creates the expandable card toggle icon. |
.pf-v6-c-card__actions | <div> | Creates an actions element to be used in the card header. |
.pf-v6-c-card__selectable-actions | <div> | Creates an element to hold a checkbox or radio and the related label used to make a card selectable or clickable. |
.pf-v6-c-card__header-main | <div> | Creates a wrapper element to be used in the card header when using an image, logo, or text. Required if .pf-v6-c-card__header has content outside of a card header toggle or card header actions |
.pf-v6-c-card__expandable-content | <div> | Creates the expandable card's expandable content. |
.pf-v6-c-card__sr-input | <input> | Creates an input which, when focused, makes a following .pf-v6-c-card appear focused. |
.pf-m-compact | .pf-v6-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-v6-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-v6-c-card__body | Sets a .pf-v6-c-card__body not to fill the available space in .pf-v6-c-card. .pf-m-no-fill can be added to multiple card bodies. |
.pf-m-selectable | .pf-v6-c-card | Modifies a card to be selectable. |
.pf-m-clickable | .pf-v6-c-card | Modifies a card to be clickable. |
.pf-m-selected | .pf-v6-c-card | Modifies a selectable card for selected state styling. Can be used in addition to indicating selection via the .pf-v6-c-card__input. |
.pf-m-current | .pf-v6-c-card | Modifies a card that is both clickable and selectable for clicked state styling. |
.pf-m-disabled | .pf-v6-c-card | Modifies a card so it is not selectable or clickable. |
.pf-m-secondary | .pf-v6-c-card | Modifies the card to have secondary styling. |
.pf-m-flat | .pf-v6-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-v6-c-card | Modifies the card to have rounded corners. |
.pf-m-plain | .pf-v6-c-card | Modifies the card to have no box shadow and no background color. |
.pf-m-expanded | .pf-v6-c-card | Modifies the card for the expanded state. |
.pf-m-toggle-right | .pf-v6-c-card__header | Modifies the expandable card header toggle to be positioned at flex-end. |
.pf-m-full-height | .pf-v6-c-card | Modifies the card to full height of its parent. |
.pf-m-no-offset | .pf-v6-c-card__actions | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--BorderStyle | solid | ||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--BorderWidth | 1px | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--BorderRadius | 16px | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--first-child--PaddingBlockStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--child--PaddingInlineEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--child--PaddingBlockEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--child--PaddingInlineStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--c-divider--child--PaddingBlockStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__title--not--last-child--PaddingBlockEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__title-text--Color | (In light theme) #151515 | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__title-text--FontFamily | "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__title-text--FontSize | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__title-text--FontWeight | 700 | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__title-text--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--c-button--disabled--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__body--FontSize | 0.875rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__footer--FontSize | 0.875rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__footer--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__actions--PaddingInlineStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__actions--Gap | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__actions--MarginBlockStart | calc(0.5rem * -1) | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__actions--MarginBlockEnd | calc(0.5rem * -1) | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__header-toggle--MarginBlockStart | calc(0.5rem * -1) | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__header-toggle--MarginInlineEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__header-toggle--MarginBlockEnd | calc(0.5rem * -1) | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__header-toggle--MarginInlineStart | calc(0.5rem * -1) | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__header-toggle-icon--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate | 90deg | ||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-selectable--BorderWidth | 1px | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-clickable--m-current--BorderColor | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-clickable--m-current--BorderWidth | 2px | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-selectable--m-selected--BorderColor | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-selectable--m-selected--BorderWidth | 2px | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-selectable--hover--BorderColor | (In light theme) #4394e5 | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-selectable--focus--BorderColor | (In light theme) #4394e5 | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-selectable--focus--BorderWidth | 1px | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-selectable--m-selected--focus--BorderColor | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-selectable--m-selected--focus--BorderWidth | 2px | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-selectable--m-disabled__title-text--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-selectable--m-disabled__body--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-selectable--m-disabled__footer--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-selectable--m-disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-selectable--m-disabled--BorderColor | transparent | ||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth | 2px | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-compact__title-text--FontSize | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-compact__body--FontSize | 0.875rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-compact__footer--FontSize | 0.75rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-compact--first-child--PaddingBlockStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-compact--child--PaddingInlineEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-compact--child--PaddingBlockEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-compact--child--PaddingInlineStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-compact--c-divider--child--PaddingBlockStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-compact__title--not--last-child--PaddingBlockEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-display-lg__title-text--FontSize | 1.25rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-display-lg__body--FontSize | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-display-lg__footer--FontSize | 0.875rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-display-lg--first-child--PaddingBlockStart | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-display-lg--child--PaddingInlineEnd | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-display-lg--child--PaddingBlockEnd | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-display-lg--child--PaddingInlineStart | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-secondary--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-secondary--BorderColor | transparent | ||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-full-height--Height | 100% | ||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-plain--BorderColor | transparent | ||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card--m-plain--BackgroundColor | transparent | ||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd | calc(0.5rem * -1) | ||
| ||||
| :where(:root, .pf-v6-c-card) | --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-card.pf-m-current | --pf-v6-c-card--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-card.pf-m-current | --pf-v6-c-card--BorderWidth | 2px | ||
| ||||
| .pf-v6-c-card.pf-m-current | --pf-v6-c-card--m-selectable--hover--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-card.pf-m-current | --pf-v6-c-card--m-selectable--focus--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:focus-visible) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) | --pf-v6-c-card--BackgroundColor | revert | ||
| .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:focus-visible) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) | --pf-v6-c-card--BorderColor | revert | ||
| .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) | --pf-v6-c-card--BorderColor | revert | ||
| .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) | --pf-v6-c-card--m-selectable--BorderWidth | revert | ||
| .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-current | --pf-v6-c-card--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-current | --pf-v6-c-card--BorderWidth | 2px | ||
| ||||
| .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) | --pf-v6-c-card--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-card.pf-m-compact | --pf-v6-c-card__title-text--FontSize | 1rem | ||
| ||||
| .pf-v6-c-card.pf-m-compact | --pf-v6-c-card__body--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-card.pf-m-compact | --pf-v6-c-card__footer--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-card.pf-m-compact | --pf-v6-c-card--first-child--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-card.pf-m-compact | --pf-v6-c-card--child--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-card.pf-m-compact | --pf-v6-c-card--child--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-card.pf-m-compact | --pf-v6-c-card--child--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-card.pf-m-compact | --pf-v6-c-card--c-divider--child--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-card.pf-m-compact | --pf-v6-c-card__title--not--last-child--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-card.pf-m-display-lg | --pf-v6-c-card__title-text--FontSize | 1.25rem | ||
| ||||
| .pf-v6-c-card.pf-m-display-lg | --pf-v6-c-card__body--FontSize | 1rem | ||
| ||||
| .pf-v6-c-card.pf-m-display-lg | --pf-v6-c-card__footer--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-card.pf-m-display-lg | --pf-v6-c-card--first-child--PaddingBlockStart | 2rem | ||
| ||||
| .pf-v6-c-card.pf-m-display-lg | --pf-v6-c-card--child--PaddingInlineEnd | 2rem | ||
| ||||
| .pf-v6-c-card.pf-m-display-lg | --pf-v6-c-card--child--PaddingBlockEnd | 2rem | ||
| ||||
| .pf-v6-c-card.pf-m-display-lg | --pf-v6-c-card--child--PaddingInlineStart | 2rem | ||
| ||||
| .pf-v6-c-card.pf-m-display-lg | --pf-v6-c-card--c-divider--child--PaddingBlockStart | 2rem | ||
| ||||
| .pf-v6-c-card.pf-m-display-lg | --pf-v6-c-card__title--not--last-child--PaddingBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-card.pf-m-secondary | --pf-v6-c-card--BorderColor | transparent | ||
| ||||
| .pf-v6-c-card.pf-m-secondary | --pf-v6-c-card--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-card.pf-m-plain | --pf-v6-c-card--BorderColor | transparent | ||
| ||||
| .pf-v6-c-card.pf-m-plain | --pf-v6-c-card--BackgroundColor | transparent | ||
| ||||
| .pf-v6-c-card__header .pf-v6-c-card__title | --pf-v6-c-card--first-child--PaddingBlockStart | 0 | ||
| .pf-v6-c-card__header .pf-v6-c-card__title | --pf-v6-c-card__title--not--last-child--PaddingBlockEnd | 0 | ||
| .pf-v6-c-card__header.pf-m-toggle-right | --pf-v6-c-card__header-toggle--MarginInlineEnd | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-card__header.pf-m-toggle-right | --pf-v6-c-card__header-toggle--MarginInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-card__actions.pf-m-no-offset | --pf-v6-c-card__actions--MarginBlockStart | 0 | ||
| .pf-v6-c-card__actions.pf-m-no-offset | --pf-v6-c-card__actions--MarginBlockEnd | 0 | ||
| .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover | --pf-v6-c-card--BorderColor | (In light theme) #4394e5 | ||
| ||||
| .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-radio__label, .pf-v6-c-check__label) | --pf-v6-c-card--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-radio__label, .pf-v6-c-check__label) | --pf-v6-c-card--m-selectable--BorderWidth | 2px | ||
| ||||
| .pf-v6-c-card__selectable-actions .pf-v6-c-card__clickable-action:where(:focus-visible) | --pf-v6-c-card--BorderColor | (In light theme) #4394e5 | ||
| ||||
| .pf-v6-c-card__selectable-actions .pf-v6-c-card__clickable-action:where(:focus-visible) | --pf-v6-c-card--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:focus-visible):where(:checked) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) | --pf-v6-c-card--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:focus-visible):where(:checked) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) | --pf-v6-c-card--BorderWidth | 2px | ||
| ||||
| .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) | --pf-v6-c-card__title-text--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) | --pf-v6-c-card__body--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) | --pf-v6-c-card__footer--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) | --pf-v6-c-card--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) | --pf-v6-c-card--BorderColor | transparent | ||
| ||||
| .pf-v6-c-card__header .pf-v6-c-button.pf-m-inline:disabled | --pf-v6-c-button--disabled--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-card__expandable-content | --pf-v6-c-card--first-child--PaddingBlockStart | 0 | ||
