Skip to content
Patternfly Logo

Panel

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. Learn more about Beta components here.

Examples

Basic

Main content
Header content

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

Props

Panel

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the panel
classNamestringClass to add to outer div
isScrollablebooleanFlag to add scrollable styling to the panel
variant'raised' | 'bordered'Adds panel variant styles

PanelMain

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the panel main div
classNamestringClass to add to outer div
maxHeightstringMax height of the panel main div as a string with the value and unit

PanelMainBody

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the panel main body div
classNamestringClass to add to outer div

PanelHeader

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the panel header
classNamestringClass to add to outer div

PanelFooter

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the panel footer
classNamestringClass to add to outer div

CSS variables

.pf-c-panel--pf-c-panel--Width
auto
.pf-c-panel--pf-c-panel--MinWidth
auto
.pf-c-panel--pf-c-panel--MaxWidth
none
.pf-c-panel--pf-c-panel--ZIndex
auto
.pf-c-panel--pf-c-panel--BackgroundColor
#fff
.pf-c-panel--pf-c-panel--BoxShadow
none
.pf-c-panel--pf-c-panel--before--BorderWidth
0
.pf-c-panel--pf-c-panel--before--BorderColor
#d2d2d2
.pf-c-panel--pf-c-panel--m-bordered--before--BorderWidth
1px
.pf-c-panel--pf-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-c-panel--pf-c-panel--m-raised--ZIndex
200
.pf-c-panel--pf-c-panel__header--PaddingTop
1rem
.pf-c-panel--pf-c-panel__header--PaddingRight
1rem
.pf-c-panel--pf-c-panel__header--PaddingBottom
1rem
.pf-c-panel--pf-c-panel__header--PaddingLeft
1rem
.pf-c-panel--pf-c-panel__main--MaxHeight
none
.pf-c-panel--pf-c-panel__main--Overflow
visible
.pf-c-panel--pf-c-panel__main-body--PaddingTop
1rem
.pf-c-panel--pf-c-panel__main-body--PaddingRight
1rem
.pf-c-panel--pf-c-panel__main-body--PaddingBottom
1rem
.pf-c-panel--pf-c-panel__main-body--PaddingLeft
1rem
.pf-c-panel--pf-c-panel__footer--PaddingTop
1rem
.pf-c-panel--pf-c-panel__footer--PaddingRight
1rem
.pf-c-panel--pf-c-panel__footer--PaddingBottom
1rem
.pf-c-panel--pf-c-panel__footer--PaddingLeft
1rem
.pf-c-panel--pf-c-panel__footer--BoxShadow
none
.pf-c-panel--pf-c-panel--m-scrollable__main--MaxHeight
18.75rem
.pf-c-panel--pf-c-panel--m-scrollable__main--Overflow
auto
.pf-c-panel--pf-c-panel--m-scrollable__footer--BoxShadow
0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16)
.pf-c-panel.pf-m-bordered--pf-c-panel--before--BorderWidth
1px
.pf-c-panel.pf-m-raised--pf-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-c-panel.pf-m-raised--pf-c-panel--ZIndex
200
.pf-c-panel.pf-m-scrollable--pf-c-panel__main--MaxHeight
18.75rem
.pf-c-panel.pf-m-scrollable--pf-c-panel__main--Overflow
auto
.pf-c-panel.pf-m-scrollable--pf-c-panel__footer--BoxShadow
0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16)

View source on GitHub