Skip to content
PatternFly

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

Documentation

Usage

Class
Applied to
Outcome
.pf-v5-c-panel
<div>
Initiates the panel. Required
.pf-v5-c-panel__header
<div>
Initiates the panel header.
.pf-v5-c-panel__main
<div>
Initiates the panel main content.
.pf-v5-c-panel__main-body
<div>
Initiates a panel content body container.
.pf-v5-c-panel__footer
<div>
Initiates the panel footer.
.pf-m-bordered
.pf-v5-c-panel
Modifies the panel for bordered styles.
.pf-m-raised
.pf-v5-c-panel
Modifies the panel for raised styles.
.pf-m-scrollable
.pf-v5-c-panel
Modifies the panel for scrollable styles.

CSS variables

Expand or collapse columnSelectorVariableValue
.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--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--pf-v5-c-panel--m-bordered--before--BorderWidth
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--pf-v5-c-panel--m-raised--ZIndex
200
.pf-v5-c-panel--pf-v5-c-panel--m-raised--BackgroundColor
#fff
.pf-v5-c-panel--pf-v5-c-panel__header--PaddingTop
1rem
.pf-v5-c-panel--pf-v5-c-panel__header--PaddingRight
1rem
.pf-v5-c-panel--pf-v5-c-panel__header--PaddingBottom
1rem
.pf-v5-c-panel--pf-v5-c-panel__header--PaddingLeft
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--pf-v5-c-panel__main-body--PaddingRight
1rem
.pf-v5-c-panel--pf-v5-c-panel__main-body--PaddingBottom
1rem
.pf-v5-c-panel--pf-v5-c-panel__main-body--PaddingLeft
1rem
.pf-v5-c-panel--pf-v5-c-panel__footer--PaddingTop
1rem
.pf-v5-c-panel--pf-v5-c-panel__footer--PaddingRight
1rem
.pf-v5-c-panel--pf-v5-c-panel__footer--PaddingBottom
1rem
.pf-v5-c-panel--pf-v5-c-panel__footer--PaddingLeft
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.pf-m-raised--pf-v5-c-panel--BackgroundColor
#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.pf-m-raised--pf-v5-c-panel--ZIndex
200
.pf-v5-c-panel.pf-m-scrollable--pf-v5-c-panel__main--MaxHeight
18.75rem
.pf-v5-c-panel.pf-m-scrollable--pf-v5-c-panel__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)

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines