Examples
Basic
Container with a single panel-main / panel-main-body pair.
No header, no footer, no decoration.
Header
Add a panel-header before the main slot to caption the panel.
Footer
Add a panel-footer after the main slot. PF v6 paints a top border on the footer
automatically.
No body
Skip the panel-main-body helper when you don't want the body's spacer padding — put
content directly inside panel-main (e.g. for an embedded table or list that brings its
own padding).
Raised
raised=true lifts the panel with a drop shadow. Use for panels that should feel like they
sit above the page background.
.raised() builder call applies pf-m-raised — adds a drop shadow that lifts the panel off the background.Bordered
bordered=true outlines the panel with a 1px border. Use when the panel sits inside a busy
background and you need a clean edge.
.bordered() builder call applies pf-m-bordered — outlines the panel with a 1px border.Secondary variant
secondary=true uses PF's secondary background token. Useful for nested panels or aside
content that should recede visually.
.secondary() builder call applies pf-m-secondary — uses the PF v6 secondary background token, useful for nested panels or aside content.Scrollable
Pair scrollable=true on the panel with maxHeight on
panel-main. PF v6 sets overflow on __main and the body
content scrolls inside.
Scrollable panels pair .scrollable() on the builder with
.maxHeight("16rem"). The body overflows the constrained height and grows
a scrollbar.
Filler 1 — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Filler 2 — Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Filler 3 — Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Filler 4 — Duis aute irure dolor in reprehenderit in voluptate velit esse.
Filler 5 — Excepteur sint occaecat cupidatat non proident, sunt in culpa.
Filler 6 — Sunt in culpa qui officia deserunt mollit anim id est laborum.
Scrollable with header and footer
Header and footer stay put while panel-main scrolls. Useful for detail panes with a sticky title / actions row.
The header and footer stay in place while panel-main scrolls. Useful for long-form content with persistent context (filter chips above, action buttons below).
Row 1 — placeholder content.
Row 2 — placeholder content.
Row 3 — placeholder content.
Row 4 — placeholder content.
Row 5 — placeholder content.
Row 6 — placeholder content.
Row 7 — placeholder content.
Row 8 — placeholder content.
Scrollable with auto height
pf-m-scrollable-auto-height fills its container and scrolls inside it.
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Documentation
Panel props
Parameters accepted by
{#include components/data-display/panel ... /}. Model mode: pass
panel=<Panel> built in Java instead — the Java tab on each example shows the
builder.
| Name | Type | Default | Description |
|---|---|---|---|
id
|
String | — | DOM id on the panel container. |
raised
|
boolean |
false
|
Applies pf-m-raised — drop shadow. Mutually exclusive with the other
variants.
|
bordered
|
boolean |
false
|
Applies pf-m-bordered — 1px border outline.
|
secondary
|
boolean |
false
|
Applies pf-m-secondary — uses the secondary background token. Useful for
nested or aside panels.
|
scrollable
|
boolean |
false
|
Applies pf-m-scrollable. Pair with maxHeight on
the panel-main include to actually scroll.
|
content (slot)
|
Qute insert | — | Includes for the panel parts (header / main / footer). See the next section. |
Part templates
Each panel part is its own runtime include. None accepts an
id param — see the divergence note below for why.
| Template | Params | Emits |
|---|---|---|
components/data-display/panel-header
|
— (content slot only) |
<div class="pf-v6-c-panel__header">{slot}</div>
|
components/data-display/panel-main
|
maxHeight (CSS length)
|
<div class="pf-v6-c-panel__main"> with optional inline
--pf-v6-c-panel__main--MaxHeight.
|
components/data-display/panel-main-body
|
— (content slot only) |
<div class="pf-v6-c-panel__main-body">{slot}</div>
|
components/data-display/panel-footer
|
— (content slot only) |
<div class="pf-v6-c-panel__footer">{slot}</div>
|
Divergence from PF React. PF's PanelHeader / PanelMain / PanelMainBody / PanelFooter each accept
their own className and id. We skip
className (React-specific) and omit id on the inner parts
because Qute include data inheritance leaks the outer panel's id into every nested
helper — producing duplicate ids on the page. If you need an id on a specific inner element, hand-code the markup
(e.g. <div class="pf-v6-c-panel__header" id="my-header">…</div>).
Usage
Compose, don't configure. The panel container exposes only modifiers (raised / bordered / secondary / scrollable). Everything visible inside the panel — header text, body content, footer actions — lives in the slot composed from the four part templates. This keeps the runtime template small and lets consumers nest arbitrary markup.
Scrollable layouts. The scroll happens on panel-main, not the
container. Set scrollable=true on the container (to opt into overflow behavior) AND
maxHeight on panel-main (to give it a height to scroll
inside). Header and footer stay outside the scroll region.
Variant precedence. If you set more than one of raised /
bordered / secondary, all of them apply as classes. PF
v6's CSS handles the cascade, but mixing them is unusual — pick one and stick with it.
vs. Card. Panel and Card overlap in purpose. Pick panel when you want a simple grouping container with optional header / body / footer slots — no decoration unless you opt into it. Pick card when you need richer chrome (selectability, expandable, footer actions with built-in spacing).