Panel

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

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	0px
--pf-v6-c-panel--before--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-panel	--pf-v6-c-panel--before--BorderColor	(In light theme) rgb(255, 255, 255, 0.0000)
--pf-v6-c-panel--before--BorderColor --pf-t--global--border--color--high-contrast rgb(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) #e0e0e0
--pf-v6-c-panel--m-bordered--before--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.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 rgb(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 rgb(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 rgb(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 rgb(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) rgb(255, 255, 255, 0.0000)
--pf-v6-c-panel--m-scrollable__footer--BorderColor --pf-t--global--border--color--high-contrast rgb(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 rgb(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 rgb(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) #e0e0e0
--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--50 --pf-t--color--gray--20 #e0e0e0
	.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 rgb(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 rgb(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 rgb(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 rgb(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) rgb(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 rgb(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 rgb(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 rgb(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