Skip to content
Versions v3 v2 v1

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.

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-card/pf-card.js';

Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.

Overview

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.

Header

This is the default card

Link in the footer

Installation

npm install @patternfly/elements

Usage

Compact card

Header

This is the compact card

Link in the footer
View HTML Source
<pf-card size="compact">
<h3 slot="header">Header</h3>
<p>This is the compact card</p>
<a slot="footer" href="#">Link in the footer</a>
</pf-card>

Rounded card

Header

This is the rounded card

Link in the footer
View HTML Source
<pf-card rounded>
<h3 slot="header">Header</h3>
<p>This is the rounded card</p>
<a slot="footer" href="#">Link in the footer</a>
</pf-card>

Large card

Large card

This is the large card

Link in the footer
View HTML Source
<pf-card size="large">
<h3 slot="header">Large card</h3>
<p>This is the large card</p>
<a slot="footer" href="#">Link in the footer</a>
</pf-card>

Full Height card

Header

This is the full height card

Link in the footer
View HTML Source
<pf-card fullHeight>
<h3 slot="header">Header</h3>
<p>This is the full height card</p>
<a slot="footer" href="#">Link in the footer</a>
</pf-card>

Plain card

Header

This is the plain card

Link in the footer
View HTML Source
<pf-card plain>
<h3 slot="header">Header</h3>
<p>This is the plain card</p>
<a slot="footer" href="#">Link in the footer</a>
</pf-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.

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.

size

Optionally provide a size for the card and the card contents. The default is set to undefined and provides default styles. Compact provides styles which decreases the padding between the sections. Large provides styles which increases the padding between the sections and the font size for the title, header, and footer.

DOM Property
size
Type
'compact' | 'large' | undefined
Default
unknown
rounded

Optionally apply a border radius for the drop shadow and/or border.

DOM Property
rounded
Type
boolean
Default
false
full-height

Optionally allow the card to take up the full height of the parent element.

DOM Property
fullHeight
Type
boolean
Default
false
plain

Optionally remove the border on the card container.

DOM Property
plain
Type
boolean
Default
false

DOM Properties

None

Methods

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pf-c-card--BackgroundColor #ffffff
--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--size-compact__body--FontSize .875rem
--pf-c-card--size-compact__footer--FontSize 1rem
--pf-c-card--size-compact--first-child--PaddingTop 1.5rem
--pf-c-card--size-compact--child--PaddingRight 1rem
--pf-c-card--size-compact--child--PaddingBottom 1rem
--pf-c-card--size-compact--child--PaddingLeft 1rem
--pf-c-card--size-compact__title--not--last-child--PaddingBottom .5rem
--pf-c-card--size-large__title--FontSize 1.25rem
--pf-c-card--size-large--first-child--PaddingTop 2rem
--pf-c-card--size-large--child--PaddingRight 2rem
--pf-c-card--size-large--child--PaddingBottom 2rem
--pf-c-card--size-large--child--PaddingLeft 2rem
--pf-c-card--size-large__title--not--last-child--PaddingBottom 1.5rem
--pf-c-card--m-flat--BorderWidth 1px solid #d2d2d2
--pf-c-card--m-plain--BoxShadow none
--pf-c-card--m-plain--BackgroundColor transparent
--pf-c-card--m-rounded--BorderRadius 3px
--pf-c-card--m-full-height--Height 100%
--pf-c-card__title--FontFamily "RedHatDisplayUpdated", helvetica, arial, sans-serif
--pf-c-card__title--FontSize 1rem
--pf-c-card__title--FontWeight 700

CSS Shadow Parts

header

The container for header content

body

The container for body content

footer

The container for footer content

© 2018-2024 Red Hat, Inc. Deploys by Netlify