Panel

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

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) rgba(255, 255, 255, 0.0000)
--pf-v6-c-panel--before--BorderColor --pf-t--global--border--color--high-contrast rgba(255, 255, 255, 0.0000)
	.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-secondary--before--BorderWidth	0px
--pf-v6-c-panel--m-secondary--before--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.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-bordered--before--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-panel--m-bordered--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-raised--BoxShadow	0px 4px 10px 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 10px 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--m-raised--before--BorderWidth	0px
--pf-v6-c-panel--m-raised--before--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.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__footer--BorderColor	transparent
	.pf-v6-c-panel	--pf-v6-c-panel__footer--BorderWidth	0
	.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 -4px 6px -4px rgba(41, 41, 41, 0.2000)
--pf-v6-c-panel--m-scrollable__footer--BoxShadow --pf-t--global--box-shadow--sm--top --pf-t--global--box-shadow--X--sm--top --pf-t--global--box-shadow--Y--sm--top --pf-t--global--box-shadow--blur--sm --pf-t--global--box-shadow--spread--sm--directional --pf-t--global--box-shadow--color--sm--directional --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--200 --pf-t--global--box-shadow--blur--100 --pf-t--global--box-shadow--spread--200 --pf-t--global--box-shadow--color--200 0px -4px 6px -4px rgba(41, 41, 41, 0.2000)
	.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-v6-c-panel--m-scrollable__footer--BorderColor	(In light theme) rgba(255, 255, 255, 0.0000)
--pf-v6-c-panel--m-scrollable__footer--BorderColor --pf-t--global--border--color--high-contrast rgba(255, 255, 255, 0.0000)
	.pf-v6-c-panel	--pf-v6-c-panel--m-scrollable__footer--BorderWidth	0px
--pf-v6-c-panel--m-scrollable__footer--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-panel	--pf-v6-c-panel--m-glass--BackgroundColor	initial
--pf-v6-c-panel--m-glass--BackgroundColor --pf-t--global--background--color--glass--primary--default initial
	.pf-v6-c-panel	--pf-v6-c-panel--m-glass--before--BorderWidth	initial
--pf-v6-c-panel--m-glass--before--BorderWidth --pf-t--global--border--width--glass--default initial
	.pf-v6-c-panel	--pf-v6-c-panel--m-glass--before--BorderColor	initial
--pf-v6-c-panel--m-glass--before--BorderColor --pf-t--global--border--color--glass--default initial
	.pf-v6-c-panel	--pf-v6-c-panel--m-glass--BoxShadow	0px 4px 10px 0px rgba(41, 41, 41, 0.1500)
--pf-v6-c-panel--m-glass--BoxShadow --pf-t--global--box-shadow--glass--default --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 10px 0px rgba(41, 41, 41, 0.1500)
	.pf-v6-c-panel	--pf-v6-c-panel--m-glass--BorderRadius	initial
--pf-v6-c-panel--m-glass--BorderRadius --pf-t--global--border--radius--glass--default initial
	.pf-v6-c-panel	--pf-v6-c-panel--m-glass--BackdropFilter	initial
--pf-v6-c-panel--m-glass--BackdropFilter --pf-t--global--background--filter--glass--blur--primary initial
	.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-bordered	--pf-v6-c-panel--before--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-panel--before--BorderColor --pf-v6-c-panel--m-bordered--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-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-secondary	--pf-v6-c-panel--before--BorderWidth	0px
--pf-v6-c-panel--before--BorderWidth --pf-v6-c-panel--m-secondary--before--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.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 10px 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 10px 0px rgba(41, 41, 41, 0.1500)
	.pf-v6-c-panel.pf-m-raised	--pf-v6-c-panel--before--BorderWidth	0px
--pf-v6-c-panel--before--BorderWidth --pf-v6-c-panel--m-raised--before--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.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 6px -4px rgba(41, 41, 41, 0.2000)
--pf-v6-c-panel__footer--BoxShadow --pf-v6-c-panel--m-scrollable__footer--BoxShadow --pf-t--global--box-shadow--sm--top --pf-t--global--box-shadow--X--sm--top --pf-t--global--box-shadow--Y--sm--top --pf-t--global--box-shadow--blur--sm --pf-t--global--box-shadow--spread--sm--directional --pf-t--global--box-shadow--color--sm--directional --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--200 --pf-t--global--box-shadow--blur--100 --pf-t--global--box-shadow--spread--200 --pf-t--global--box-shadow--color--200 0px -4px 6px -4px rgba(41, 41, 41, 0.2000)
	.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
	.pf-v6-c-panel.pf-m-scrollable	--pf-v6-c-panel__footer--BorderColor	(In light theme) rgba(255, 255, 255, 0.0000)
--pf-v6-c-panel__footer--BorderColor --pf-v6-c-panel--m-scrollable__footer--BorderColor --pf-t--global--border--color--high-contrast rgba(255, 255, 255, 0.0000)
	.pf-v6-c-panel.pf-m-scrollable	--pf-v6-c-panel__footer--BorderWidth	0px
--pf-v6-c-panel__footer--BorderWidth --pf-v6-c-panel--m-scrollable__footer--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-panel.pf-m-glass	--pf-v6-c-panel--BackgroundColor	initial
--pf-v6-c-panel--BackgroundColor --pf-v6-c-panel--m-glass--BackgroundColor --pf-t--global--background--color--glass--primary--default initial
	.pf-v6-c-panel.pf-m-glass	--pf-v6-c-panel--before--BorderWidth	initial
--pf-v6-c-panel--before--BorderWidth --pf-v6-c-panel--m-glass--before--BorderWidth --pf-t--global--border--width--glass--default initial
	.pf-v6-c-panel.pf-m-glass	--pf-v6-c-panel--before--BorderColor	initial
--pf-v6-c-panel--before--BorderColor --pf-v6-c-panel--m-glass--before--BorderColor --pf-t--global--border--color--glass--default initial
	.pf-v6-c-panel.pf-m-glass	--pf-v6-c-panel--BoxShadow	0px 4px 10px 0px rgba(41, 41, 41, 0.1500)
--pf-v6-c-panel--BoxShadow --pf-v6-c-panel--m-glass--BoxShadow --pf-t--global--box-shadow--glass--default --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 10px 0px rgba(41, 41, 41, 0.1500)
	.pf-v6-c-panel.pf-m-glass	--pf-v6-c-panel--BorderRadius	initial
--pf-v6-c-panel--BorderRadius --pf-v6-c-panel--m-glass--BorderRadius --pf-t--global--border--radius--glass--default initial

Edit this page on GitHub