Panel

A panel is a customizable container that can contain other components in flexible content layouts.

Examples

Basic

Main content

Secondary

Main content with secondary styling

Header

Main content

Footer

Main content

Header and footer

Main content

No body

Main content

Raised

Main content

Bordered

Main content

Scrollable

Main content

Main content

Main content

Main content

Main content

Main content

Main content

Main content

Main content

Scrollable with header and footer

Main content

Main content

Main content

Main content

Main content

Main content

Main content

Main content

Main content

Documentation

Usage

Class	Applied to	Outcome
`.pf-v6-c-panel`	`<div>`	Initiates the panel. Required
`.pf-v6-c-panel__header`	`<div>`	Initiates the panel header.
`.pf-v6-c-panel__main`	`<div>`	Initiates the panel main content.
`.pf-v6-c-panel__main-body`	`<div>`	Initiates a panel content body container.
`.pf-v6-c-panel__menu`	`<div>`	Initiates a panel menu container.
`.pf-v6-c-panel__footer`	`<div>`	Initiates the panel footer.
`.pf-m-bordered`	`.pf-v6-c-panel`	Modifies the panel for bordered styles.
`.pf-m-raised`	`.pf-v6-c-panel`	Modifies the panel for raised styles.
`.pf-m-scrollable`	`.pf-v6-c-panel`	Modifies the panel for scrollable styles.
`.pf-m-secondary`	`.pf-v6-c-panel`	Modifies the panel for secondary styles.

CSS variables

Expand or collapse column	Selector	Variable	Value
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--Width	auto
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--MinWidth	auto
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--MaxWidth	none
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-panel--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--BoxShadow	none
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--BorderRadius	6px
--pf-v6-c-panel--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--before--BorderWidth	0
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--before--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-panel--before--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--m-secondary--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-panel--m-secondary--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--m-bordered--before--BorderWidth	1px
--pf-v6-c-panel--m-bordered--before--BorderWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--m-raised--BoxShadow	0px 4px 8px 0px rgba(0, 0, 0, 0.1200)
--pf-v6-c-panel--m-raised--BoxShadow --pf-t--global--box-shadow--md --pf-t--global--box-shadow--X--md--default --pf-t--global--box-shadow--Y--md--default --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md --pf-t--global--box-shadow--color--md --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--600 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--200 0px 4px 8px 0px rgba(0, 0, 0, 0.1200)
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--m-raised--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-panel--m-raised--BackgroundColor --pf-t--global--background--color--floating--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel__header--PaddingBlockStart	1rem
--pf-v6-c-panel__header--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel__header--PaddingInlineEnd	1.5rem
--pf-v6-c-panel__header--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel__header--PaddingBlockEnd	1rem
--pf-v6-c-panel__header--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel__header--PaddingInlineStart	1.5rem
--pf-v6-c-panel__header--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel__main--MaxHeight	none
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel__main--Overflow	visible
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel__main-body--PaddingBlockStart	1rem
--pf-v6-c-panel__main-body--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel__main-body--PaddingInlineEnd	1.5rem
--pf-v6-c-panel__main-body--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel__main-body--PaddingBlockEnd	1rem
--pf-v6-c-panel__main-body--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel__main-body--PaddingInlineStart	1.5rem
--pf-v6-c-panel__main-body--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel__footer--PaddingBlockStart	0.5rem
--pf-v6-c-panel__footer--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel__footer--PaddingInlineEnd	1.5rem
--pf-v6-c-panel__footer--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel__footer--PaddingBlockEnd	0.5rem
--pf-v6-c-panel__footer--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel__footer--PaddingInlineStart	1.5rem
--pf-v6-c-panel__footer--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel__footer--BoxShadow	none
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--m-scrollable__main--MaxHeight	18.75rem
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--m-scrollable__main--Overflow	auto
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--m-scrollable__footer--BoxShadow	0px -4px 8px 0px rgba(0, 0, 0, 0.1200)
--pf-v6-c-panel--m-scrollable__footer--BoxShadow --pf-t--global--box-shadow--md--top --pf-t--global--box-shadow--X--md--top --pf-t--global--box-shadow--Y--md--top --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md --pf-t--global--box-shadow--color--md --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--200 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--200 0px -4px 8px 0px rgba(0, 0, 0, 0.1200)
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart	1rem
--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-panel)	--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd	1rem
--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-panel.pf-m-bordered	--pf-v6-c-panel--before--BorderWidth	1px
--pf-v6-c-panel--before--BorderWidth --pf-v6-c-panel--m-bordered--before--BorderWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-panel.pf-m-secondary	--pf-v6-c-panel--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-panel--BackgroundColor --pf-v6-c-panel--m-secondary--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-panel.pf-m-raised	--pf-v6-c-panel--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-panel--BackgroundColor --pf-v6-c-panel--m-raised--BackgroundColor --pf-t--global--background--color--floating--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-panel.pf-m-raised	--pf-v6-c-panel--BoxShadow	0px 4px 8px 0px rgba(0, 0, 0, 0.1200)
--pf-v6-c-panel--BoxShadow --pf-v6-c-panel--m-raised--BoxShadow --pf-t--global--box-shadow--md --pf-t--global--box-shadow--X--md--default --pf-t--global--box-shadow--Y--md--default --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md --pf-t--global--box-shadow--color--md --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--600 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--200 0px 4px 8px 0px rgba(0, 0, 0, 0.1200)
	.pf-v6-c-panel.pf-m-scrollable	--pf-v6-c-panel__main--MaxHeight	18.75rem
--pf-v6-c-panel__main--MaxHeight --pf-v6-c-panel--m-scrollable__main--MaxHeight 18.75rem
	.pf-v6-c-panel.pf-m-scrollable	--pf-v6-c-panel__main--Overflow	auto
--pf-v6-c-panel__main--Overflow --pf-v6-c-panel--m-scrollable__main--Overflow auto
	.pf-v6-c-panel.pf-m-scrollable	--pf-v6-c-panel__footer--BoxShadow	0px -4px 8px 0px rgba(0, 0, 0, 0.1200)
--pf-v6-c-panel__footer--BoxShadow --pf-v6-c-panel--m-scrollable__footer--BoxShadow --pf-t--global--box-shadow--md--top --pf-t--global--box-shadow--X--md--top --pf-t--global--box-shadow--Y--md--top --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md --pf-t--global--box-shadow--color--md --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--200 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--200 0px -4px 8px 0px rgba(0, 0, 0, 0.1200)
	.pf-v6-c-panel.pf-m-scrollable	--pf-v6-c-panel__footer--PaddingBlockStart	1rem
--pf-v6-c-panel__footer--PaddingBlockStart --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-panel.pf-m-scrollable	--pf-v6-c-panel__footer--PaddingBlockEnd	1rem
--pf-v6-c-panel__footer--PaddingBlockEnd --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem

View source on GitHub