Info alert:Beta feature
This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.
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
