Panel

The panel component is a container that supports flexible content layouts. It can be used to house other components such as fields, forms, videos, buttons, and more. The panel should not be confused with the drawer component, which allows you to surface information via a collapsable container.

Examples

Basic

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 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'	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-v5-c-panel	--pf-v5-c-panel--Width	auto
	.pf-v5-c-panel	--pf-v5-c-panel--MinWidth	auto
	.pf-v5-c-panel	--pf-v5-c-panel--MaxWidth	none
	.pf-v5-c-panel	--pf-v5-c-panel--ZIndex	auto
	.pf-v5-c-panel	--pf-v5-c-panel--BackgroundColor	#fff
--pf-v5-c-panel--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff
	.pf-v5-c-panel	--pf-v5-c-panel--BoxShadow	none
	.pf-v5-c-panel	--pf-v5-c-panel--before--BorderWidth	0
	.pf-v5-c-panel	--pf-v5-c-panel--before--BorderColor	#d2d2d2
--pf-v5-c-panel--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2
	.pf-v5-c-panel	--pf-v5-c-panel--m-bordered--before--BorderWidth	1px
--pf-v5-c-panel--m-bordered--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-panel	--pf-v5-c-panel--m-raised--BoxShadow	0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
--pf-v5-c-panel--m-raised--BoxShadow --pf-v5-global--BoxShadow--md $pf-v5-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v5-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-v5-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
	.pf-v5-c-panel	--pf-v5-c-panel--m-raised--ZIndex	200
--pf-v5-c-panel--m-raised--ZIndex --pf-v5-global--ZIndex--sm $pf-v5-global--ZIndex--sm 200
	.pf-v5-c-panel	--pf-v5-c-panel--m-raised--BackgroundColor	#fff
--pf-v5-c-panel--m-raised--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff
	.pf-v5-c-panel	--pf-v5-c-panel__header--PaddingTop	1rem
--pf-v5-c-panel__header--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-panel	--pf-v5-c-panel__header--PaddingRight	1rem
--pf-v5-c-panel__header--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-panel	--pf-v5-c-panel__header--PaddingBottom	1rem
--pf-v5-c-panel__header--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-panel	--pf-v5-c-panel__header--PaddingLeft	1rem
--pf-v5-c-panel__header--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-panel	--pf-v5-c-panel__main--MaxHeight	none
	.pf-v5-c-panel	--pf-v5-c-panel__main--Overflow	visible
	.pf-v5-c-panel	--pf-v5-c-panel__main-body--PaddingTop	1rem
--pf-v5-c-panel__main-body--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-panel	--pf-v5-c-panel__main-body--PaddingRight	1rem
--pf-v5-c-panel__main-body--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-panel	--pf-v5-c-panel__main-body--PaddingBottom	1rem
--pf-v5-c-panel__main-body--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-panel	--pf-v5-c-panel__main-body--PaddingLeft	1rem
--pf-v5-c-panel__main-body--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-panel	--pf-v5-c-panel__footer--PaddingTop	1rem
--pf-v5-c-panel__footer--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-panel	--pf-v5-c-panel__footer--PaddingRight	1rem
--pf-v5-c-panel__footer--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-panel	--pf-v5-c-panel__footer--PaddingBottom	1rem
--pf-v5-c-panel__footer--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-panel	--pf-v5-c-panel__footer--PaddingLeft	1rem
--pf-v5-c-panel__footer--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-panel	--pf-v5-c-panel__footer--BoxShadow	none
	.pf-v5-c-panel	--pf-v5-c-panel--m-scrollable__main--MaxHeight	18.75rem
	.pf-v5-c-panel	--pf-v5-c-panel--m-scrollable__main--Overflow	auto
	.pf-v5-c-panel	--pf-v5-c-panel--m-scrollable__footer--BoxShadow	0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16)
	.pf-v5-c-panel.pf-m-bordered	--pf-v5-c-panel--before--BorderWidth	1px
--pf-v5-c-panel--before--BorderWidth --pf-v5-c-panel--m-bordered--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-panel.pf-m-raised	--pf-v5-c-panel--BackgroundColor	#fff
--pf-v5-c-panel--BackgroundColor --pf-v5-c-panel--m-raised--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff
	.pf-v5-c-panel.pf-m-raised	--pf-v5-c-panel--BoxShadow	0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
--pf-v5-c-panel--BoxShadow --pf-v5-c-panel--m-raised--BoxShadow --pf-v5-global--BoxShadow--md $pf-v5-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v5-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-v5-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
	.pf-v5-c-panel.pf-m-raised	--pf-v5-c-panel--ZIndex	200
--pf-v5-c-panel--ZIndex --pf-v5-c-panel--m-raised--ZIndex --pf-v5-global--ZIndex--sm $pf-v5-global--ZIndex--sm 200
	.pf-v5-c-panel.pf-m-scrollable	--pf-v5-c-panel__main--MaxHeight	18.75rem
--pf-v5-c-panel__main--MaxHeight --pf-v5-c-panel--m-scrollable__main--MaxHeight 18.75rem
	.pf-v5-c-panel.pf-m-scrollable	--pf-v5-c-panel__main--Overflow	auto
--pf-v5-c-panel__main--Overflow --pf-v5-c-panel--m-scrollable__main--Overflow auto
	.pf-v5-c-panel.pf-m-scrollable	--pf-v5-c-panel__footer--BoxShadow	0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16)
--pf-v5-c-panel__footer--BoxShadow --pf-v5-c-panel--m-scrollable__footer--BoxShadow 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16)

View source on GitHub