Examples
Scrollable
Main content
Main content
Main content
Main content
Main content
Main content
Main content
Main content
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-c-panel | <div> | Initiates the panel. Required |
.pf-c-panel__header | <div> | Initiates the panel header. |
.pf-c-panel__main | <div> | Initiates the panel main content. |
.pf-c-panel__main-body | <div> | Initiates a panel content body container. |
.pf-c-panel__footer | <div> | Initiates the panel footer. |
.pf-m-bordered | .pf-c-panel | Modifies the panel for bordered styles. |
.pf-m-raised | .pf-c-panel | Modifies the panel for raised styles. |
.pf-m-scrollable | .pf-c-panel | Modifies the panel for scrollable styles. |
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