Introducing PrimeReact v11-alpha 🎉Discover Now

Card Theming

Theming documentation for Card component

Styled#

Card CSS Classes#

List of class names used in the styled mode.

classNamedescription
p-cardClass name of the root element
p-card-headerClass name of the header element
p-card-bodyClass name of the body element
p-card-captionClass name of the caption element
p-card-titleClass name of the title element
p-card-subtitleClass name of the subtitle element
p-card-contentClass name of the content element
p-card-footerClass name of the footer element

Design Tokens#

List of design tokens.

tokenCSS Variabledescription
card.background
--p-card-background
Background of root
card.border.radius
--p-card-border-radius
Border radius of root
card.color
--p-card-color
Color of root
card.shadow
--p-card-shadow
Shadow of root
card.body.padding
--p-card-body-padding
Padding of body
card.body.gap
--p-card-body-gap
Gap of body
card.caption.gap
--p-card-caption-gap
Gap of caption
card.title.font.size
--p-card-title-font-size
Font size of title
card.title.font.weight
--p-card-title-font-weight
Font weight of title
card.subtitle.color
--p-card-subtitle-color
Color of subtitle
card.subtitle.font.size
--p-card-subtitle-font-size
Font size of subtitle
card.subtitle.font.weight
--p-card-subtitle-font-weight
Font weight of subtitle

Unstyled#

Theming is implemented with the pass through properties in unstyled mode.