Panel

Examples

Basic

Main content

Header

Main content

Footer

Main content

Header and footer

Main content

No body

Main content

Raised

Main content

Bordered

Main content

Secondary variant

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

Props

Panel

*required
Name	Type	Description
children	React.ReactNode	Content rendered inside the panel
className	string	Class to add to outer div
isScrollable	boolean	Flag to add scrollable styling to the panel
variant	'raised' \| 'bordered' \| 'secondary'	Adds panel variant styles

PanelMain

*required
Name	Type	Description
children	React.ReactNode	Content rendered inside the panel main div
className	string	Class to add to outer div
maxHeight	string	Max height of the panel main div as a string with the value and unit

PanelMainBody

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the panel main body div
className	string		Class to add to outer div

PanelHeader

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the panel header
className	string		Class to add to outer div

PanelFooter

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the panel footer
className	string		Class to add to outer div

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-panel	--pf-v6-c-panel--Width	auto
	.pf-v6-c-panel	--pf-v6-c-panel--MinWidth	auto
	.pf-v6-c-panel	--pf-v6-c-panel--MaxWidth	none
	.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
	.pf-v6-c-panel	--pf-v6-c-panel--BoxShadow	none
	.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
	.pf-v6-c-panel	--pf-v6-c-panel--before--BorderWidth	0
	.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
	.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
	.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
	.pf-v6-c-panel	--pf-v6-c-panel--m-raised--BoxShadow	0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
--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--default --pf-t--global--box-shadow--color--md--default --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--100 0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
	.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
	.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
	.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
	.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
	.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
	.pf-v6-c-panel	--pf-v6-c-panel__main--MaxHeight	none
	.pf-v6-c-panel	--pf-v6-c-panel__main--Overflow	visible
	.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
	.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
	.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
	.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
	.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
	.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
	.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
	.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
	.pf-v6-c-panel	--pf-v6-c-panel__footer--BoxShadow	none
	.pf-v6-c-panel	--pf-v6-c-panel--m-scrollable__main--MaxHeight	18.75rem
	.pf-v6-c-panel	--pf-v6-c-panel--m-scrollable__main--Overflow	auto
	.pf-v6-c-panel	--pf-v6-c-panel--m-scrollable__footer--BoxShadow	0px -10px 9px -8px rgba(41, 41, 41, 0.1500)
--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--directional --pf-t--global--box-shadow--color--md--directional --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--100 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--300 --pf-t--global--box-shadow--color--100 0px -10px 9px -8px rgba(41, 41, 41, 0.1500)
	.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
	.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 9px 0px rgba(41, 41, 41, 0.1500)
--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--default --pf-t--global--box-shadow--color--md--default --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--100 0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
	.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 -10px 9px -8px rgba(41, 41, 41, 0.1500)
--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--directional --pf-t--global--box-shadow--color--md--directional --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--100 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--300 --pf-t--global--box-shadow--color--100 0px -10px 9px -8px rgba(41, 41, 41, 0.1500)
	.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