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/elementsThen 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 footerInstallation
npm install @patternfly/elementsUsage
Compact card
Header
This is the compact card
Link in the footerView 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 footerView 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 footerView 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 footerView 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 footerView 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
undefinedand 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
