Skip to content
Live demo — this example is server-driven; run the showcase locally for the interactive version.

Card

A bounded container with a title, body, and footer. The building block for dashboard tiles, catalog items, project summaries — anywhere a piece of content needs its own boxed real estate.

Examples

Basic

Title, body, and footer — the minimal card.

Project Apollo

Ship the new dashboard by end of quarter. Owner: Alice. Status: on track.
Last updated 2 hours ago

Card with subtitle

A pf-v6-c-card__subtitle below the title.

Card title

Card subtitle
The subtitle sits in its own pf-v6-c-card__subtitle element below the title.
Footer

Card with subtitle and actions

Header actions (kebab + checkbox) with a title and subtitle in the header main area.

Card title

Card subtitle
Header actions (kebab + checkbox) pair with a title + subtitle in the header main area.
Footer

Secondary cards

pf-m-secondary — secondary background variant.

Compact

pf-m-compact — tighter padding for dense grids.

Compact card

Tighter padding — useful in dense card grids.

Flat

Kept for back-compat — PF v6 cards are flat by default; the flat param is accepted but emits no class.

Flat card

No shadow — sits flush against the background.

Modifiers

Toggle pf-m-compact / pf-m-display-lg / pf-m-full-height / pf-m-plain live.

Modifier playground

Toggle the checkboxes to apply the matching pf-m-* classes live.
Footer

Header images and actions

Brand image in the header with end-aligned actions.

Quarkus PHA

Card title

A brand image in the header with actions aligned to the end.
Footer

Title inline with images and actions

Image and title share the header main area.

Quarkus PHA

This title sits in the card head

Image and title share the header main area, inline with the actions.
Footer

Card header without title

A header that carries only actions.

This is the card body. The header above carries only actions — no title element at all.

Card with header that wraps

pf-m-wrap lets long titles wrap under the actions.

This is a really really really really really really really really really really long header

pf-m-wrap on the header lets a long title wrap under the actions.

With HTML heading element

The title text takes whatever heading level fits the page outline.

This title is an <h4>

Pick the heading level that fits the page outline — the styling comes from the class, not the tag.
Footer

With multiple body sections

Cards can stack several __body elements.

Card title

First body section
Second body section
Third body section
Footer

With a primary body section that fills

Bodies default to filling; pf-m-no-fill opts out per section.

Card title

Body section with pf-m-no-fill
Another no-fill body section
This default body section fills the remaining card height.
Footer

Selectable

pf-m-selectable + a checkbox in __selectable-actions; Alpine flips pf-m-selected. Third card is disabled.

Single selectable

Radio-backed selection — exactly one card holds pf-m-selected.

Actionable

pf-m-clickable with an invisible __clickable-action overlay — button, link, and disabled variants.

Actionable and selectable

Checkbox selection combined with a clickable title.

Expandable cards

__header-toggle + __expandable-content; the toggle icon rotates via pf-m-expanded.

Expandable card

The expandable content — hidden until the toggle is expanded.
Footer

Expandable with icon

Expandable card with a brand image in place of the title.

Quarkus PHA
A brand image takes the title's place in the header.
Footer

Card with dividers

pf-v6-c-divider rules between the card sections.

Card title

First body section
Second body section
Footer

Single selectable tiles

Tile-style selectable cards backed by radios.

Multi selectable tiles

Tile-style selectable cards backed by checkboxes.

Documentation

Card props

The card is a template family: card is the root and the sections are their own includes — card-header, card-title, card-subtitle, card-body, card-footer, card-expandable-content — composed inside the card include's main block. Section content is each include's own main block (rich markup welcome), so no generic slot names exist to collide with outer templates; card-header's named slots are card-prefixed (cardActions, cardSelectableActions, cardHeaderMain) for the same reason.

* required
Name Type Description
id String DOM id on the card root.
compact / displayLg / plain / fullHeight / secondary Boolean The matching pf-m-* modifier.
selectable / clickable / selected / disabled Boolean Selection-related modifiers; pair with card-header hasSelectableActions.
expandable Boolean Wires the expand contract: Alpine expanded state on the root + bound pf-m-expanded. Pair with card-header expandable=true and card-expandable-content.
selectedExpr String Alpine expression; while truthy the card carries pf-m-selected. E.g. selectedExpr="chosen === 'one'".
attrs String (raw) Raw attribute passthrough on the root for Alpine directives. Shadowed inside the family's slots so it cannot leak into composed includes.
card-header Include wrap, expandable, toggleAriaLabel; guarded slots cardActions / cardSelectableActions / cardHeaderMain via has* params; main block renders bare (direct title spot).
card-title Include headingLevel (default h2), id for aria-labelledby wiring; title content is the main block — links, icons, buttons all fine.
card-subtitle / card-body / card-footer Include Main-block content; card-body takes noFill and can repeat for multiple sections.
card-expandable-content Include The region the toggle reveals (x-show="expanded"); put body/footer includes inside.

Usage

Pair with Gallery. The canonical card grid is Gallery layout + cards as children — auto-fill, equal width, gutters.

Clickable cards. For full-card click targets, wrap the card in an <a> or attach role="button" tabindex="0" + click handler. Ensure focus styles are visible.


Edit card.html on GitHub
Static snapshot of the quarkus-pha showcase — source & live version