`<pf-v5-card>`

Gives a preview of information in a small layout

Category: Layout
Built with: Lit
Library: PatternFly Elements
Author: Red Hat
Package: @patternfly/elements
Component size: 4.5 kB JS (minified + gzipped, JS includes dependencies beyond the library)
Library size: 6.3 kB JS (shared by every PatternFly Elements component, loaded once per page)
Popular: 2 out of 5
Downloads: 3,967/week (whole @patternfly/elements package)
Latest stable version: 5.0.0
Last published: May 3, 2026
License: MIT

Source code

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.

Attributes

size
rounded
full-height
plain

Slots

header
title
footer

CSS Parts

header
body
footer