Live demo — this example is server-driven; run the showcase locally for the interactive version.
Card
Use Card straight from a Qute template — parameters and slots instead of Java builders. This reference is generated
from the runtime template sources: each template documents its parameters and slots in the header comment shown
beneath its include line.
Card — PatternFly v6. Root of the card family; compose sections with
card-header / card-title / card-subtitle / card-body / card-footer includes
(or hr.pf-v6-c-divider between sections). Content is the include's MAIN BLOCK —
no named slot, so nothing to collide with outer templates' slots.
Optional params:
id — DOM id on the root.
compact, displayLg, plain, fullHeight, secondary — pf-m-* modifiers.
flat, rounded — accepted for back-compat but emit nothing (PF v6 removed both modifiers).
selectable — pf-m-selectable (pair with card-header hasSelectableActions).
clickable — pf-m-clickable.
selected — static pf-m-selected.
disabled — pf-m-disabled.
expandable — wires the expand contract: x-data="{ expanded: false }" on the root
and a bound pf-m-expanded class. Pair with card-header expandable=true
and card-expandable-content for the collapsing region.
selectedExpr — Alpine expression (e.g. "chosen === 'one'"); when truthy the card
gets pf-m-selected. Use for selection driven by outer x-data state.
attrs — raw attribute passthrough (Alpine directives etc.). Inherits through
nested includes; shadowed inside the card family's slots.
Model mode: pass card=<org.sitenetsoft.quarkus.pha.model.Card> (built via Card.of(id))
— ordered sections plus the Header config; body/footer/title content renders unescaped.
card-body
{#include components/data-display/card-body /}
Card body — PatternFly v6. Repeat the include for multiple body sections.
Optional: noFill — pf-m-no-fill (this
section won't stretch to fill the card height).
Card expandable content — PatternFly v6. The region the expand toggle reveals; wired to the root card's `expanded`
Alpine state (card expandable=true). Put card-body / card-footer includes inside.
card-footer
{#include components/data-display/card-footer /}
Card footer — PatternFly v6. Main-block content.
card-header
{#include components/data-display/card-header /}
Card header — PatternFly v6. Slots are card-prefixed so they cannot collide with outer templates' slot names through
nested-include resolution.
Optional params: wrap — pf-m-wrap (long titles wrap under the actions). expandable —
renders the expand toggle, wired to the root card's `expanded` Alpine state (set expandable=true on the card include).
toggleAriaLabel — aria-label on the expand toggle (default "Details"). hasCardActions — render the __actions region with
the cardActions slot. hasSelectableActions — render __selectable-actions with the cardSelectableActions slot.
hasHeaderMain — render __header-main with the cardHeaderMain slot (brand image and/or card-title include). Main block:
rendered bare after the regions — the usual spot for a direct card-title include when no header-main wrapper is wanted.
Card subtitle — PatternFly v6. Main-block content. Must sit inside the card header's __header-main (card-header with
hasHeaderMain=true), NOT as a direct card child: PF pads __header/__title/__body/__footer but not __subtitle, so a
direct child renders 24px outdented from the title.
card-title
{#include components/data-display/card-title /}
Card title — PatternFly v6. Content is the include's main block, so titles can
carry any markup (links, icons, Alpine bindings), not just text.
Optional params:
id — id on the __title div; reference it from selectable inputs /
clickable actions via aria-labelledby.
headingLevel — h1…h6 (default h2). Styling comes from the class, not the tag.