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
Props
Panel
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the panel | |
| className | string | Class to add to outer div | |
| isScrollable | boolean | Flag to add scrollable styling to the panel | |
| variant | 'raised' | 'bordered' | Adds panel variant styles |
PanelMain
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the panel main div | |
| className | string | Class to add to outer div | |
| maxHeight | string | Max height of the panel main div as a string with the value and unit |
PanelMainBody
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the panel main body div | |
| className | string | Class to add to outer div |
PanelHeader
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the panel header | |
| className | string | Class to add to outer div |
PanelFooter
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the panel footer | |
| className | string | Class to add to outer div |
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
