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 auto height

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

Pill

Main content

Props

Panel

*required
Name	Type	Description
children	React.ReactNode	Content rendered inside the panel
className	string	Class to add to outer div
hasNoBorder Beta	boolean	Flag to remove the panel's border
isAutoHeight Beta	boolean	When used with a scrollable panel, sets the panel to auto height
isFullHeight Beta	boolean	Flag to make the panel fill the available height of its container
isGlass Beta	boolean	Modifies the panel to use glass styling when the glass theme is enabled
isPill Beta	boolean	Uses pill (fully rounded) border radius for the panel
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	16px
--pf-v6-c-panel--BorderRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.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-no-border--before--BorderWidth	0
	.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--m-raised--BorderRadius	6px
--pf-v6-c-panel--m-raised--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.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	1.5rem
--pf-v6-c-panel__main-body--PaddingBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.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	1.5rem
--pf-v6-c-panel__main-body--PaddingBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.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-pill--BorderRadius	999px
--pf-v6-c-panel--m-pill--BorderRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.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-raised	--pf-v6-c-panel--BorderRadius	6px
--pf-v6-c-panel--BorderRadius --pf-v6-c-panel--m-raised--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.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-scrollable-auto-height	--pf-v6-c-panel__main--MaxHeight	100%
	:where(.pf-v6-theme-glass) .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
	:where(.pf-v6-theme-glass) .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
	:where(.pf-v6-theme-glass) .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
	:where(.pf-v6-theme-glass) .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)
	:where(.pf-v6-theme-glass) .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
	.pf-v6-c-panel.pf-m-no-border	--pf-v6-c-panel--before--BorderWidth	0
--pf-v6-c-panel--before--BorderWidth --pf-v6-c-panel--m-no-border--before--BorderWidth 0
	.pf-v6-c-panel.pf-m-pill	--pf-v6-c-panel--BorderRadius	999px
--pf-v6-c-panel--BorderRadius --pf-v6-c-panel--m-pill--BorderRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px

Edit this page on GitHub