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.
Installation
We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.
For more information on import maps and how to use them, see the import map reference on MDN Web Docs.
If you are using node and NPM, you can install this component using npm:
npm install @patternfly/elementsThen import this component into your project by using a bare module specifier:
import '@patternfly/elements/pf-panel/pf-panel.js';Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.
Overview
Main content
Installation
npm install @patternfly/elementsUsage
Header
Header content
Main content
View HTML Source
<pf-panel>
<h3 slot="header">Header content</h3>
<p>Main content</p>
</pf-panel>
No Header
Main content
Footer content
View HTML Source
<pf-panel>
<p>Main content</p>
<p slot="footer">Footer content</p>
</pf-panel>
Header and footer
Header content
Main content
Footer content
View HTML Source
<pf-panel>
<h3 slot="header">Header content</h3>
<p>Main content</p>
<p slot="footer">Footer content</p>
</pf-panel>
Raised
Main content
View HTML Source
<pf-panel variant="raised">
<p>Main content</p>
</pf-panel>
Bordered
Main content
View HTML Source
<pf-panel variant="bordered">
<p>Main content</p>
</pf-panel>
Scrollable
A couple of years ago the Computer Science Club at Bishop's University ran into a problem. Our student run computer lab was running unlicensed copies of a propriety operating system. The computers also had many unlicensed programs installed. It was a big mess. At that time we had to make an ethical decision. We had to decide whether we wanted to continue breaking the law or not. We decided against running software for which we didn't have licenses as it could lead to the lab being closed.
A couple of years ago the Computer Science Club at Bishop's University ran into a problem. Our student run computer lab was running unlicensed copies of a propriety operating system. The computers also had many unlicensed programs installed. It was a big mess. At that time we had to make an ethical decision. We had to decide whether we wanted to continue breaking the law or not. We decided against running software for which we didn't have licenses as it could lead to the lab being closed.
A couple of years ago the Computer Science Club at Bishop's University ran into a problem. Our student run computer lab was running unlicensed copies of a propriety operating system. The computers also had many unlicensed programs installed. It was a big mess. At that time we had to make an ethical decision. We had to decide whether we wanted to continue breaking the law or not. We decided against running software for which we didn't have licenses as it could lead to the lab being closed.
Footer content
View HTML Source
<pf-panel scrollable>
<p>
A couple of years ago the Computer Science Club at Bishop's University
ran into a problem. Our student run computer lab was running
unlicensed copies of a propriety operating system. The computers also
had many unlicensed programs installed. It was a big mess. At that
time we had to make an ethical decision. We had to decide whether we
wanted to continue breaking the law or not. We decided against running
software for which we didn't have licenses as it could lead to the lab
being closed.
</p>
<p>
A couple of years ago the Computer Science Club at Bishop's University
ran into a problem. Our student run computer lab was running
unlicensed copies of a propriety operating system. The computers also
had many unlicensed programs installed. It was a big mess. At that
time we had to make an ethical decision. We had to decide whether we
wanted to continue breaking the law or not. We decided against running
software for which we didn't have licenses as it could lead to the lab
being closed.
</p>
<p>
A couple of years ago the Computer Science Club at Bishop's University
ran into a problem. Our student run computer lab was running
unlicensed copies of a propriety operating system. The computers also
had many unlicensed programs installed. It was a big mess. At that
time we had to make an ethical decision. We had to decide whether we
wanted to continue breaking the law or not. We decided against running
software for which we didn't have licenses as it could lead to the lab
being closed.
</p>
<p slot="footer">Footer content</p>
</pf-panel>
Scrollable with header and footer
Header content
A couple of years ago the Computer Science Club at Bishop's University ran into a problem. Our student run computer lab was running unlicensed copies of a propriety operating system. The computers also had many unlicensed programs installed. It was a big mess. At that time we had to make an ethical decision. We had to decide whether we wanted to continue breaking the law or not. We decided against running software for which we didn't have licenses as it could lead to the lab being closed.
A couple of years ago the Computer Science Club at Bishop's University ran into a problem. Our student run computer lab was running unlicensed copies of a propriety operating system. The computers also had many unlicensed programs installed. It was a big mess. At that time we had to make an ethical decision. We had to decide whether we wanted to continue breaking the law or not. We decided against running software for which we didn't have licenses as it could lead to the lab being closed.
A couple of years ago the Computer Science Club at Bishop's University ran into a problem. Our student run computer lab was running unlicensed copies of a propriety operating system. The computers also had many unlicensed programs installed. It was a big mess. At that time we had to make an ethical decision. We had to decide whether we wanted to continue breaking the law or not. We decided against running software for which we didn't have licenses as it could lead to the lab being closed.
Footer content
View HTML Source
<pf-panel scrollable>
<h3 slot="header">Header content</h3>
<p>
A couple of years ago the Computer Science Club at Bishop's University
ran into a problem. Our student run computer lab was running
unlicensed copies of a propriety operating system. The computers also
had many unlicensed programs installed. It was a big mess. At that
time we had to make an ethical decision. We had to decide whether we
wanted to continue breaking the law or not. We decided against running
software for which we didn't have licenses as it could lead to the lab
being closed.
</p>
<p>
A couple of years ago the Computer Science Club at Bishop's University
ran into a problem. Our student run computer lab was running
unlicensed copies of a propriety operating system. The computers also
had many unlicensed programs installed. It was a big mess. At that
time we had to make an ethical decision. We had to decide whether we
wanted to continue breaking the law or not. We decided against running
software for which we didn't have licenses as it could lead to the lab
being closed.
</p>
<p>
A couple of years ago the Computer Science Club at Bishop's University
ran into a problem. Our student run computer lab was running
unlicensed copies of a propriety operating system. The computers also
had many unlicensed programs installed. It was a big mess. At that
time we had to make an ethical decision. We had to decide whether we
wanted to continue breaking the law or not. We decided against running
software for which we didn't have licenses as it could lead to the lab
being closed.
</p>
<p slot="footer">Footer content</p>
</pf-panel>
Slots
-
header -
Place header content here
- Default Slot
-
footer -
Place footer content here
Attributes
scrollable-
- DOM Property
scrollable- Type
-
boolean - Default
-
false
variant-
- DOM Property
variant- Type
-
'raised' | 'bordered' - Default
-
unknown
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-global--BackgroundColor--100 |
#fff
|
|
--pf-c-panel--before--BorderWidth |
Border width of panel before element |
0
|
--pf-c-panel--ZIndex |
Z-index of panel |
auto
|
--pf-c-panel--Width |
Width of panel |
auto
|
--pf-c-panel--MinWidth |
Minimum width of panel |
auto
|
--pf-c-panel--MaxWidth |
Maximum width of panel |
none
|
--pf-c-panel--BackgroundColor |
Background color of panel |
var(--pf-global--BackgroundColor--100, #fff)
|
--pf-c-panel--m-bordered--before--BorderWidth |
Border width of bordered panel before element |
var(--pf-global--BorderWidth--sm, 1px)
|
--pf-c-panel--before--BorderColor |
Border color of panel before element |
var(--pf-global--BorderColor--100, #d2d2d2)
|
--pf-c-panel--BoxShadow |
Box shadow of panel |
var(--pf-c-panel--m-raised--BoxShadow,
var(--pf-global--BoxShadow--md, 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--m-raised--BoxShadow |
Box shadow of raised panel |
var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06))
|
--pf-global--BoxShadow--md |
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--m-raised--ZIndex |
Z-index of raised panel |
var(--pf-global--ZIndex--sm, 200)
|
--pf-global--ZIndex--sm |
200
|
|
--pf-c-panel--m-scrollable__main--MaxHeight |
Maximum height of scrollable panel main |
18.75rem
|
--pf-c-panel--m-scrollable__main--Overflow |
Overflow of scrollable panel main |
auto
|
--pf-c-panel--m-scrollable__footer--BoxShadow |
Box shadow of scrollable panel footer |
0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16)
|
--pf-c-panel__main--MaxHeight |
Maximum height of panel main |
var(--pf-c-panel--m-scrollable__main--MaxHeight)
|
--pf-c-panel__main--Overflow |
Overflow of panel main |
visible
|
--pf-c-panel__main-body--PaddingTop |
Top padding of panel main body |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-panel__main-body--PaddingRight |
Right padding of panel main body |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-panel__main-body--PaddingBottom |
Bottom padding of panel main body |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-panel__main-body--PaddingLeft |
Left padding of panel main body |
var(--pf-global--spacer--md, 1rem)
|
--pf-global--spacer--md |
1rem
|
|
--pf-c-panel__header--PaddingTop |
Top padding of panel header |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-panel__header--PaddingRight |
Right padding of panel header |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-panel__header--PaddingBottom |
Bottom padding of panel header |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-panel__header--PaddingLeft |
Left padding of panel header |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-panel__footer--PaddingTop |
Top padding of panel footer |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-panel__footer--PaddingRight |
Right padding of panel footer |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-panel__footer--PaddingBottom |
Bottom padding of panel footer |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-panel__footer--PaddingLeft |
Left padding of panel footer |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-panel__footer--BoxShadow |
Box shadow of panel footer |
none
|
--pf-global--BorderWidth--sm |
1px
|
|
--pf-c-divider--BackgroundColor |
—
|
|
--pf-global--BorderColor--100 |
#d2d2d2
|
|
--pf-c-divider--BorderColor--base |
—
|
|
--pf-c-divider--Height |
—
|
|
--pf-c-divider--BorderWidth--base |
—
|
|
--pf-c-divider--m-horizontal--Display |
—
|
|
--pf-c-divider--m-horizontal--FlexDirection |
—
|
|
--pf-c-divider--m-horizontal--after--Width |
—
|
|
--pf-c-divider--m-horizontal--after--Height |
—
|
|
--pf-c-divider--Display |
—
|
|
--pf-c-divider--FlexDirection |
—
|
|
--pf-c-divider--after--Width |
—
|
|
--pf-c-divider--after--Height |
—
|
|
--pf-c-divider--after--BackgroundColor |
—
|
|
--pf-c-divider--after--FlexBasis |
—
|
|
--pf-c-divider--after--Inset |
—
|
CSS Shadow Parts
None
