Skip to content
Versions v3 v2 v1

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

Then 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/elements

Usage

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

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' | undefined
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)

CSS Shadow Parts

None

© 2018-2024 Red Hat, Inc. Deploys by Netlify