Panel

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

Main content

Main content

Main content

Main content

Main content

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

Main content

Main content

Main content

Main content

Main content

Pill

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`	Adds a border to the panel.
`.pf-m-no-border`	`.pf-v6-c-panel`	Removes the border from a variant that has a default border.
`.pf-m-raised`	`.pf-v6-c-panel`	Applies elevated styles for use when the panel appears on top of other elements.
`.pf-m-scrollable`	`.pf-v6-c-panel`	Modifies the panel so the main content is scrollable.
`.pf-m-scrollable-auto-height`	`.pf-v6-c-panel`	Modifies the panel to have an auto height when scrollable.
`.pf-m-secondary`	`.pf-v6-c-panel`	Modifies the panel for secondary styles.
`.pf-m-pill`	`.pf-v6-c-panel`	Modifies the panel for pill border radius.
`.pf-m-full-height`	`.pf-v6-c-panel`	Makes the panel fill the available height.
`.pf-m-glass`	`.pf-v6-c-panel`	Applies glass styling to the panel in glass theme.

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 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--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 -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-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-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 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-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 -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
	.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

Edit this page on GitHub