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.

Templates

card

{#include components/data-display/card /}
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

{#include components/data-display/card-expandable-content /}
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.
{#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

{#include components/data-display/card-subtitle /}
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.