PatternFly Elements - Home PatternFly Elements

Card

Overview

This element creates a header, body, and footer region in which to place content or other components.

Cards are flexible surfaces used to group information in a small layout. They give small previews of information or provide secondary content in relation to the content it's near. Several cards can be used together to group related information.

Default card

This is the default card

Link in the footer

Lightest card

This is the lightest card with a border

Link in the footer

Darker card

This is the darker card

Link in the footer

Darkest card

This is the darkest card

Link in the footer

Complement card

This is the complement card

Link in the footer

Accent card

This is the accent card

Link in the footer

Installation

npm install @patternfly/pfe-card

Usage

  <pfe-card>
    <h2 slot="header">Card header</h2>
    <p>This is the pfe-card body.</p>
    <p slot="footer">This is the footer</p>
  </pfe-card>

Slots

All slots are optional. If the slot is not defined, the content will be added to the body region of the card.

header

If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6). An icon, svg, or use of the icon component are also valid in this region.

Default Slot

Any content that is not designated for the header or footer slot, will go to this slot.

footer

Use this slot for anything that you want to be stuck to the base of the card. This region is bottom-aligned.

Deprecated Slots
pfe-card--header
Note: pfe-card--header is deprecated.

use header
pfe-card--footer
Note: pfe-card--footer is deprecated.

use footer

Attributes

overflow (child element attribute)

Optionally allows an image or element to overflow the padding on the container. This property should be added to the direct child of the slot such as on an image tag; should be added to the element that you want to overflow the container. Accepts: top, right, bottom, left.

img-src

Optional background image applied to the entire card container. Alignment of this image can be managed using the --pfe-card--BackgroundPosition variable which is set to center center by default.

DOM Property
imgSrc
Type
string | undefined
Default
unknown
color-palette

Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See CSS Custom Properties for default values

Card always resets its context to base, unless explicitly provided with a color-palette.

DOM Property
colorPalette
Type
ColorPalette | undefined
Default
'base'
on

Sets color theme based on parent context

DOM Property
on
Type
ColorTheme | undefined
Default
unknown
size

Optionally adjusts the padding on the container. Accepts: small.

DOM Property
size
Type
'small' | undefined
Default
unknown
border

Optionally apply a border color and weight to the entire card container. The default color and weight is #d2d2d2 and 1px, respectively.

DOM Property
border
Type
boolean
Default
false

DOM Properties

None

Deprecated DOM Properties
color
Note: color is deprecated.

use color-palette
Type
ColorPalette | undefined
Default
unknown

Methods

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pfe-theme--color--surface--lightest #ffffff
--pfe-theme--color--surface--lighter #ececec
--pfe-theme--color--surface--base #f0f0f0
--pfe-theme--color--surface--darker #3c3f42
--pfe-theme--color--surface--darkest #151515
--pfe-theme--color--surface--accent #004080
--pfe-theme--color--surface--complement #002952
--pfe-band--BackgroundColor

Though using the color attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the --pfe-band--BackgroundColor variable. If you update this value manually, you should also update the --theme context variable to invoke the right theme on it and it's child elements. Supported themes include: light, dark, and saturated.

 —
--pfe-card--BackgroundPosition

This is designed for use with the img-src attribute to allow you to align your background image. Default value is center center.

 center center
--pfe-card--Border

This allows the customization of a border around the entire container.

 center center
--pfe-card--Border

This allows the customization of a border around the entire container.

 —
--pfe-card--BorderRadius

This allows the customization of a border radius around the entire container.

 —
--pfe-card--BorderWeight

This allows the customization of a border weight around the entire container.

 —
--pfe-card--BorderStyle

This allows the customization of a border style around the entire container.

 —
--pfe-card--BorderColor

This allows the customization of a border color around the entire container.

 —

CSS Shadow Parts

header

The container for header content

body

The container for body content

footer

The container for footer content