Skip to content
PatternFly

Card

A card is a square or rectangular container that can contain any kind of content. Cards symbolize units of information, and each one acts as an entry point for users to access more details. For example, in dashboards and catalog views, cards function as a preview of a detailed page. Cards may also be used in data displays like card views, or for positioning content on a page.

Examples

Basic

Title

Body
Footer

With image and action

Title

Body
Footer

With title in head

This is a really really really really really really really really really really long title

Body
Footer

With only actions in head (no title/footer)

This is the card body. There are only actions in the card head.

Actions with no offset

This is a card title

Body
Footer

With only image in head

Title

Body
Footer

With no title

This card has no title
Footer

With only a content section

Body

With multiple body sections

Title

Body
Body
Body
Footer

With only one body that fills

Title

Body pf-m-no-fill
Body pf-m-no-fill
Body
Footer

Compact

Title

Body
Footer

Large

Title

Body
Footer

Selectable

Title

Body
Footer

Disabled card

Body
Footer

Selected but disabled card

Body
Footer

Single selectable

Title

Body
Footer

Disabled card

Body
Footer

Selected but disabled card

Body
Footer

Clickable

Title

Body
Footer

Disabled card

Body
Footer

Selected but disabled card

Body
Footer

Clickable and selectable

Body
Footer
Body
Footer
Body
Footer
Body
Footer

Hoverable raised

Title

Body
Footer

Selectable raised

Title

Body
Footer

Selected raised

Title

Body
Footer

Selectable raised with a hidden input for improved screen reader accessibility

Title

Body
Footer

Non selectable raised

Title

Body
Footer

Flat

Title

Body
Footer

Rounded

Title

Body
Footer

Plain

Title

Body
Footer

Expandable

Title

Expandable with image

PatternFly logo

Expanded

Title

Body
Footer

Full height card

Title

Body
Footer

Expandable toggle on right

Title

Card with dividers between sections

Title

Body
Body
Footer

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-v5-c-card
<div>
Creates a card component. Required
.pf-v5-c-card__title
<div>
Creates a card title container.
.pf-v5-c-card__title-text
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <div>
Creates a card title text element.
.pf-v5-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-v5-c-card__body elements.
.pf-v5-c-card__footer
<div>
Creates the footer of a card.
.pf-v5-c-card__header
<div>
Creates the header of the card where images, actions, and/or the card title can go.
.pf-v5-c-card__header-toggle
<div>
Creates the expandable card toggle.
.pf-v5-c-card__header-toggle-icon
<span>
Creates the expandable card toggle icon.
.pf-v5-c-card__actions
<div>
Creates an actions element to be used in the card header.
.pf-v5-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-v5-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-v5-c-card__header has content outside of a card header toggle or card header actions
.pf-v5-c-card__expandable-content
<div>
Creates the expandable card's expandable content.
.pf-v5-c-card__sr-input
<input>
Creates an input which, when focused, makes a following .pf-v5-c-card appear focused.
.pf-m-compact
.pf-v5-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-v5-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-v5-c-card__body
Sets a .pf-v5-c-card__body not to fill the available space in .pf-v5-c-card. .pf-m-no-fill can be added to multiple card bodies.
.pf-m-selectable
.pf-v5-c-card
Modifies a card to be selectable.
.pf-m-clickable
.pf-v5-c-card
Modifies a card to be clickable.
.pf-m-selected
.pf-v5-c-card
Modifies a selectable card for selected state styling. Can be used in addition to indicating selection via the .pf-v5-c-card__input.
.pf-m-current
.pf-v5-c-card
Modifies a card that is both clickable and selectable for clicked state styling.
.pf-m-disabled
.pf-v5-c-card
Modifies a card so it is not selectable or clickable.
.pf-m-hoverable-raised
.pf-v5-c-card
Modifies the card to include hover styles on :hover.
.pf-m-selectable-raised
.pf-v5-c-card
Modifies a selectable card so that it is selectable.
.pf-m-selected-raised
.pf-v5-c-card.pf-m-selectable-raised
Modifies a selectable card for the selected state.
.pf-m-non-selectable-raised
.pf-v5-c-card
Modifies a selectable card so that it is not selectable.
.pf-m-flat
.pf-v5-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-v5-c-card
Modifies the card to have rounded corners.
.pf-m-plain
.pf-v5-c-card
Modifies the card to have no box shadow and no background color.
.pf-m-expanded
.pf-v5-c-card
Modifies the card for the expanded state.
.pf-m-toggle-right
.pf-v5-c-card__header
Modifies the expandable card header toggle to be positioned at flex-end.
.pf-m-full-height
.pf-v5-c-card
Modifies the card to full height of its parent.
.pf-m-no-offset
.pf-v5-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 columnSelectorVariableValue
.pf-v5-c-card--pf-v5-c-card--BackgroundColor
#fff
.pf-v5-c-card--pf-v5-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-v5-c-card--pf-v5-c-card--first-child--PaddingTop
1.5rem
.pf-v5-c-card--pf-v5-c-card--child--PaddingRight
1.5rem
.pf-v5-c-card--pf-v5-c-card--child--PaddingBottom
1.5rem
.pf-v5-c-card--pf-v5-c-card--child--PaddingLeft
1.5rem
.pf-v5-c-card--pf-v5-c-card--c-divider--child--PaddingTop
1.5rem
.pf-v5-c-card--pf-v5-c-card__title--not--last-child--PaddingBottom
1rem
.pf-v5-c-card--pf-v5-c-card__title-text--FontFamily
'"RedHatDisplay", helvetica, arial, sans-serif'
.pf-v5-c-card--pf-v5-c-card__title-text--FontSize
1rem
.pf-v5-c-card--pf-v5-c-card__title-text--FontWeight
400
.pf-v5-c-card--pf-v5-c-card__title-text--LineHeight
1.5
.pf-v5-c-card--pf-v5-c-card__body--FontSize
1rem
.pf-v5-c-card--pf-v5-c-card__footer--FontSize
1rem
.pf-v5-c-card--pf-v5-c-card__actions--PaddingLeft
1rem
.pf-v5-c-card--pf-v5-c-card__actions--Gap
0.5rem
.pf-v5-c-card--pf-v5-c-card__actions--MarginTop
calc(0.375rem * -1)
.pf-v5-c-card--pf-v5-c-card__actions--MarginBottom
calc(0.375rem * -1)
.pf-v5-c-card--pf-v5-c-card__header-toggle--MarginTop
calc(0.375rem * -1)
.pf-v5-c-card--pf-v5-c-card__header-toggle--MarginRight
0.25rem
.pf-v5-c-card--pf-v5-c-card__header-toggle--MarginBottom
calc(0.375rem * -1)
.pf-v5-c-card--pf-v5-c-card__header-toggle--MarginLeft
calc(1rem * -1)
.pf-v5-c-card--pf-v5-c-card__header-toggle-icon--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-v5-c-card--pf-v5-c-card--m-expanded__header-toggle-icon--Rotate
90deg
.pf-v5-c-card--pf-v5-c-card--m-selectable--BorderWidth
1px
.pf-v5-c-card--pf-v5-c-card--m-selectable--m-selected--BackgroundColor
#f0f0f0
.pf-v5-c-card--pf-v5-c-card--m-selectable--m-selected--BorderColor
#06c
.pf-v5-c-card--pf-v5-c-card--m-selectable--hover--BackgroundColor
#f5f5f5
.pf-v5-c-card--pf-v5-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-v5-c-card--pf-v5-c-card--m-selectable--focus--BackgroundColor
#bee1f4
.pf-v5-c-card--pf-v5-c-card--m-selectable--focus--BorderColor
#06c
.pf-v5-c-card--pf-v5-c-card--m-selectable--m-selected--focus--BorderColor
#06c
.pf-v5-c-card--pf-v5-c-card--m-selectable--m-disabled--BackgroundColor
#fafafa
.pf-v5-c-card--pf-v5-c-card--m-selectable--m-disabled--BorderColor
#d2d2d2
.pf-v5-c-card--pf-v5-c-card--m-selectable--m-disabled--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-v5-c-card--pf-v5-c-card--m-selectable--m-clickable--hover--BackgroundColor
#fff
.pf-v5-c-card--pf-v5-c-card--m-selectable--m-clickable--hover--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-v5-c-card--pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor
transparent
.pf-v5-c-card--pf-v5-c-card--m-selectable--m-clickable--m-selected--BackgroundColor
#fff
.pf-v5-c-card--pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor
#f5f5f5
.pf-v5-c-card--pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor
#06c
.pf-v5-c-card--pf-v5-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-v5-c-card--pf-v5-c-card--m-hoverable-raised--hover--before--BackgroundColor
#73bcf7
.pf-v5-c-card--pf-v5-c-card--m-selectable-raised--before--Right
0
.pf-v5-c-card--pf-v5-c-card--m-selectable-raised--before--Bottom
0
.pf-v5-c-card--pf-v5-c-card--m-selectable-raised--before--Left
0
.pf-v5-c-card--pf-v5-c-card--m-flat--m-selectable-raised--before--Right
calc(-1 * 1px)
.pf-v5-c-card--pf-v5-c-card--m-flat--m-selectable-raised--before--Bottom
calc(-1 * 1px)
.pf-v5-c-card--pf-v5-c-card--m-flat--m-selectable-raised--before--Left
calc(-1 * 1px)
.pf-v5-c-card--pf-v5-c-card--m-selectable-raised--before--Height
4px
.pf-v5-c-card--pf-v5-c-card--m-selectable-raised--before--BackgroundColor
transparent
.pf-v5-c-card--pf-v5-c-card--m-selectable-raised--before--Transition
none
.pf-v5-c-card--pf-v5-c-card--m-selectable-raised--before--ScaleY
1
.pf-v5-c-card--pf-v5-c-card--m-selectable-raised--before--TranslateY
0
.pf-v5-c-card--pf-v5-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-v5-c-card--pf-v5-c-card--m-selectable-raised--hover--before--BackgroundColor
#73bcf7
.pf-v5-c-card--pf-v5-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-v5-c-card--pf-v5-c-card--m-selectable-raised--focus--before--BackgroundColor
#73bcf7
.pf-v5-c-card--pf-v5-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-v5-c-card--pf-v5-c-card--m-selectable-raised--active--before--BackgroundColor
#73bcf7
.pf-v5-c-card--pf-v5-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor
#06c
.pf-v5-c-card--pf-v5-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-v5-c-card--pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY--base
-0.5rem
.pf-v5-c-card--pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY
-0.5rem
.pf-v5-c-card--pf-v5-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY
calc(-0.5rem + 1px)
.pf-v5-c-card--pf-v5-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY
calc(-0.5rem + 3px)
.pf-v5-c-card--pf-v5-c-card--m-selectable-raised--m-selected-raised--ZIndex
100
.pf-v5-c-card--pf-v5-c-card--m-selectable-raised--m-selected-raised--Transition
transform .25s linear, box-shadow .25s linear
.pf-v5-c-card--pf-v5-c-card--m-selectable-raised--m-selected-raised--before--Transition
transform .25s linear
.pf-v5-c-card--pf-v5-c-card--m-selectable-raised--m-selected-raised--before--TranslateY
calc(-0.5rem * -1)
.pf-v5-c-card--pf-v5-c-card--m-selectable-raised--m-selected-raised--before--ScaleY
2
.pf-v5-c-card--pf-v5-c-card--m-non-selectable-raised--BackgroundColor
#fafafa
.pf-v5-c-card--pf-v5-c-card--m-non-selectable-raised--before--BackgroundColor
#d2d2d2
.pf-v5-c-card--pf-v5-c-card--m-non-selectable-raised--before--ScaleY
2
.pf-v5-c-card--pf-v5-c-card--m-flat--m-non-selectable-raised--before--BorderColor
#d2d2d2
.pf-v5-c-card--pf-v5-c-card--m-compact__body--FontSize
0.875rem
.pf-v5-c-card--pf-v5-c-card--m-compact__footer--FontSize
0.875rem
.pf-v5-c-card--pf-v5-c-card--m-compact--first-child--PaddingTop
1rem
.pf-v5-c-card--pf-v5-c-card--m-compact--child--PaddingRight
1rem
.pf-v5-c-card--pf-v5-c-card--m-compact--child--PaddingBottom
1rem
.pf-v5-c-card--pf-v5-c-card--m-compact--child--PaddingLeft
1rem
.pf-v5-c-card--pf-v5-c-card--m-compact--c-divider--child--PaddingTop
1rem
.pf-v5-c-card--pf-v5-c-card--m-compact__title--not--last-child--PaddingBottom
0.5rem
.pf-v5-c-card--pf-v5-c-card--m-display-lg__title-text--FontSize
1.25rem
.pf-v5-c-card--pf-v5-c-card--m-display-lg--first-child--PaddingTop
2rem
.pf-v5-c-card--pf-v5-c-card--m-display-lg--child--PaddingRight
2rem
.pf-v5-c-card--pf-v5-c-card--m-display-lg--child--PaddingBottom
2rem
.pf-v5-c-card--pf-v5-c-card--m-display-lg--child--PaddingLeft
2rem
.pf-v5-c-card--pf-v5-c-card--m-display-lg--c-divider--child--PaddingTop
2rem
.pf-v5-c-card--pf-v5-c-card--m-display-lg__title--not--last-child--PaddingBottom
1.5rem
.pf-v5-c-card--pf-v5-c-card--m-flat--BorderWidth
1px
.pf-v5-c-card--pf-v5-c-card--m-flat--BorderColor
#d2d2d2
.pf-v5-c-card--pf-v5-c-card--m-rounded--BorderRadius
3px
.pf-v5-c-card--pf-v5-c-card--m-full-height--Height
100%
.pf-v5-c-card--pf-v5-c-card--m-plain--BoxShadow
none
.pf-v5-c-card--pf-v5-c-card--m-plain--BackgroundColor
transparent
.pf-v5-c-card--pf-v5-c-card__header--m-toggle-right--toggle--MarginRight
calc(0.375rem * -1)
.pf-v5-c-card--pf-v5-c-card__header--m-toggle-right--toggle--MarginLeft
0.25rem
.pf-v5-c-card--pf-v5-c-card__input--focus--BorderWidth
2px
.pf-v5-c-card--pf-v5-c-card__input--focus--BorderColor
#06c
.pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:focus-visible) ~ .pf-v5-c-check__label--pf-v5-c-card--BackgroundColor
unset
.pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:focus-visible) ~ .pf-v5-c-check__label--pf-v5-c-card--BorderColor
unset
.pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:checked) ~ .pf-v5-c-check__label--pf-v5-c-card--BackgroundColor
#fff
.pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:checked) ~ .pf-v5-c-check__label--pf-v5-c-card--BorderColor
transparent
.pf-v5-c-card.pf-m-selectable.pf-m-clickable.pf-m-current--pf-v5-c-card--BackgroundColor
#f5f5f5
.pf-v5-c-card.pf-m-selectable.pf-m-clickable.pf-m-current--pf-v5-c-card--BorderColor
#06c
.pf-v5-c-card.pf-m-selectable.pf-m-clickable.pf-m-current.pf-m-selected--pf-v5-c-card--BackgroundColor
#f5f5f5
.pf-v5-c-card.pf-m-selectable.pf-m-clickable.pf-m-current.pf-m-selected--pf-v5-c-card--BorderColor
#06c
.pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:disabled) ~ .pf-v5-c-check__label--pf-v5-c-card--BackgroundColor
#fafafa
.pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:disabled) ~ .pf-v5-c-check__label--pf-v5-c-card--BorderColor
#d2d2d2
.pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:disabled) ~ .pf-v5-c-check__label--pf-v5-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-v5-c-card.pf-m-hoverable-raised:hover--pf-v5-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-v5-c-card.pf-m-hoverable-raised:hover--pf-v5-c-card--m-selectable-raised--before--BackgroundColor
#73bcf7
.pf-v5-c-card.pf-m-selectable-raised:hover--pf-v5-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-v5-c-card.pf-m-selectable-raised:hover--pf-v5-c-card--m-selectable-raised--before--BackgroundColor
#73bcf7
.pf-v5-c-card.pf-m-selectable-raised:focus--pf-v5-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-v5-c-card.pf-m-selectable-raised:focus--pf-v5-c-card--m-selectable-raised--before--BackgroundColor
#73bcf7
.pf-v5-c-card.pf-m-selectable-raised:active--pf-v5-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-v5-c-card.pf-m-selectable-raised:active--pf-v5-c-card--m-selectable-raised--before--BackgroundColor
#73bcf7
.pf-v5-c-card.pf-m-selectable-raised.pf-m-selected-raised--pf-v5-c-card--m-selectable-raised--before--BackgroundColor
#06c
.pf-v5-c-card.pf-m-selectable-raised.pf-m-selected-raised--pf-v5-c-card--m-selectable-raised--before--Transition
transform .25s linear
.pf-v5-c-card.pf-m-selectable-raised.pf-m-selected-raised--pf-v5-c-card--m-selectable-raised--before--TranslateY
calc(-0.5rem * -1)
.pf-v5-c-card.pf-m-selectable-raised.pf-m-selected-raised--pf-v5-c-card--m-selectable-raised--before--ScaleY
2
.pf-v5-c-card.pf-m-non-selectable-raised--pf-v5-c-card--BackgroundColor
#fafafa
.pf-v5-c-card.pf-m-non-selectable-raised--pf-v5-c-card--BoxShadow
none
.pf-v5-c-card.pf-m-non-selectable-raised--pf-v5-c-card--m-flat--BorderColor
#d2d2d2
.pf-v5-c-card.pf-m-non-selectable-raised--pf-v5-c-card--m-selectable-raised--before--BackgroundColor
#d2d2d2
.pf-v5-c-card.pf-m-non-selectable-raised--pf-v5-c-card--m-selectable-raised--before--ScaleY
2
.pf-v5-c-card.pf-m-compact--pf-v5-c-card__body--FontSize
0.875rem
.pf-v5-c-card.pf-m-compact--pf-v5-c-card__footer--FontSize
0.875rem
.pf-v5-c-card.pf-m-compact--pf-v5-c-card--first-child--PaddingTop
1rem
.pf-v5-c-card.pf-m-compact--pf-v5-c-card--child--PaddingRight
1rem
.pf-v5-c-card.pf-m-compact--pf-v5-c-card--child--PaddingBottom
1rem
.pf-v5-c-card.pf-m-compact--pf-v5-c-card--child--PaddingLeft
1rem
.pf-v5-c-card.pf-m-compact--pf-v5-c-card--c-divider--child--PaddingTop
1rem
.pf-v5-c-card.pf-m-compact--pf-v5-c-card__title--not--last-child--PaddingBottom
0.5rem
.pf-v5-c-card.pf-m-display-lg--pf-v5-c-card__title-text--FontSize
1.25rem
.pf-v5-c-card.pf-m-display-lg--pf-v5-c-card--first-child--PaddingTop
2rem
.pf-v5-c-card.pf-m-display-lg--pf-v5-c-card--child--PaddingRight
2rem
.pf-v5-c-card.pf-m-display-lg--pf-v5-c-card--child--PaddingBottom
2rem
.pf-v5-c-card.pf-m-display-lg--pf-v5-c-card--child--PaddingLeft
2rem
.pf-v5-c-card.pf-m-display-lg--pf-v5-c-card--c-divider--child--PaddingTop
2rem
.pf-v5-c-card.pf-m-display-lg--pf-v5-c-card__title--not--last-child--PaddingBottom
1.5rem
.pf-v5-c-card.pf-m-flat--pf-v5-c-card--BoxShadow
none
.pf-v5-c-card.pf-m-flat--pf-v5-c-card--m-selectable-raised--before--Right
calc(-1 * 1px)
.pf-v5-c-card.pf-m-flat--pf-v5-c-card--m-selectable-raised--before--Bottom
calc(-1 * 1px)
.pf-v5-c-card.pf-m-flat--pf-v5-c-card--m-selectable-raised--before--Left
calc(-1 * 1px)
.pf-v5-c-card.pf-m-flat--pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY
calc(-0.5rem + 1px)
.pf-v5-c-card.pf-m-plain--pf-v5-c-card--BoxShadow
none
.pf-v5-c-card.pf-m-plain--pf-v5-c-card--BackgroundColor
transparent
.pf-v5-c-card.pf-m-rounded--pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY
calc(-0.5rem + 3px)
.pf-v5-c-card__header .pf-v5-c-card__title--pf-v5-c-card--first-child--PaddingTop
0
.pf-v5-c-card__header .pf-v5-c-card__title--pf-v5-c-card__title--not--last-child--PaddingBottom
0
.pf-v5-c-card__header.pf-m-toggle-right--pf-v5-c-card__header-toggle--MarginRight
calc(0.375rem * -1)
.pf-v5-c-card__header.pf-m-toggle-right--pf-v5-c-card__header-toggle--MarginLeft
0.25rem
.pf-v5-c-card__actions.pf-m-no-offset--pf-v5-c-card__actions--MarginTop
0
.pf-v5-c-card__actions.pf-m-no-offset--pf-v5-c-card__actions--MarginBottom
0
.pf-v5-c-card__selectable-actions .pf-v5-c-check__label:hover--pf-v5-c-card--BackgroundColor
#f5f5f5
.pf-v5-c-card__selectable-actions .pf-v5-c-check__label:hover--pf-v5-c-card--BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:checked) ~ .pf-v5-c-check__label--pf-v5-c-card--BorderColor
#06c
.pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:checked) ~ .pf-v5-c-check__label--pf-v5-c-card--BackgroundColor
#f0f0f0
.pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:focus-visible) ~ .pf-v5-c-check__label--pf-v5-c-card--BorderColor
#06c
.pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:focus-visible) ~ .pf-v5-c-check__label--pf-v5-c-card--BackgroundColor
#bee1f4
.pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:focus-visible):where(:checked) ~ .pf-v5-c-check__label--pf-v5-c-card--BorderColor
#06c
.pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:disabled) ~ .pf-v5-c-check__label--pf-v5-c-card--BackgroundColor
#fafafa
.pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:disabled) ~ .pf-v5-c-check__label--pf-v5-c-card--BorderColor
#d2d2d2
.pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:disabled) ~ .pf-v5-c-check__label--pf-v5-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-v5-c-card__expandable-content--pf-v5-c-card--first-child--PaddingTop
0

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines