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
-
Place main content here
-
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-c-panel--Width |
auto
|
|
--pf-c-panel--MinWidth |
auto
|
|
--pf-c-panel--MaxWidth |
none
|
|
--pf-c-panel--ZIndex |
auto
|
|
--pf-c-panel--BackgroundColor |
var(--pf-global--BackgroundColor--100, #fff)
|
|
--pf-c-panel--BoxShadow |
none
|
|
--pf-c-panel--before--BorderWidth |
0
|
|
--pf-c-panel--before--BorderColor |
var(--pf-global--BorderColor--100, #d2d2d2)
|
|
--pf-c-panel--m-bordered--before--BorderWidth |
var(--pf-global--BorderWidth--sm, 1px)
|
|
--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--ZIndex |
var(--pf-global--ZIndex--sm, 200)
|
|
--pf-c-panel__header--PaddingTop |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-panel__header--PaddingRight |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-panel__header--PaddingBottom |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-panel__header--PaddingLeft |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-panel__main--MaxHeight |
none
|
|
--pf-c-panel__main--Overflow |
visible
|
|
--pf-c-panel__main-body--PaddingTop |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-panel__main-body--PaddingRight |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-panel__main-body--PaddingBottom |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-panel__main-body--PaddingLeft |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-panel__footer--PaddingTop |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-panel__footer--PaddingRight |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-panel__footer--PaddingBottom |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-panel__footer--PaddingLeft |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-panel__footer--BoxShadow |
none
|
|
--pf-c-panel--m-scrollable__main--MaxHeight |
18.75rem
|
|
--pf-c-panel--m-scrollable__main--Overflow |
auto
|
|
--pf-c-panel--m-scrollable__footer--BoxShadow |
0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16)
|
|
--pf-global--BackgroundColor--100 |
#fff
|
|
--pf-c-panel--ZIndex |
—
|
|
--pf-c-panel--Width |
—
|
|
--pf-c-panel--MinWidth |
—
|
|
--pf-c-panel--MaxWidth |
—
|
|
--pf-c-panel--BackgroundColor |
—
|
|
--pf-c-panel--m-bordered--before--BorderWidth |
var(--pf-global--BorderWidth--sm, 1px)
|
|
--pf-c-panel--before--BorderColor |
var(--pf-global--BorderColor--100, #d2d2d2)
|
|
--pf-c-panel--BoxShadow |
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 |
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 |
var(--pf-global--ZIndex--sm, 200)
|
|
--pf-global--ZIndex--sm |
200
|
|
--pf-c-panel--m-scrollable__main--MaxHeight |
—
|
|
--pf-c-panel--m-scrollable__main--Overflow |
—
|
|
--pf-c-panel--m-scrollable__footer--BoxShadow |
—
|
|
--pf-c-panel__main--MaxHeight |
var(--pf-c-panel--m-scrollable__main--MaxHeight)
|
|
--pf-c-panel__main--Overflow |
—
|
|
--pf-c-panel__main-body--PaddingTop |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-panel__main-body--PaddingRight |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-panel__main-body--PaddingBottom |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-panel__main-body--PaddingLeft |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-global--spacer--md |
1rem
|
|
--pf-c-panel__header--PaddingTop |
—
|
|
--pf-c-panel__header--PaddingRight |
—
|
|
--pf-c-panel__header--PaddingBottom |
—
|
|
--pf-c-panel__header--PaddingLeft |
—
|
|
--pf-c-panel__footer--PaddingTop |
—
|
|
--pf-c-panel__footer--PaddingRight |
—
|
|
--pf-c-panel__footer--PaddingBottom |
—
|
|
--pf-c-panel__footer--PaddingLeft |
—
|
|
--pf-c-panel__footer--BoxShadow |
—
|
|
--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
