Examples
Basic
Banners can be styled with one of 9 different nonstatus colors. A nonstatus banner should only be used when the banner color does not represent status or severity.
Status
When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using .pf-v6-screen-reader
or an equivalent.
Documentation
Usage
Class | Applied to | Outcome |
---|---|---|
.pf-v6-c-banner | <div> | Initiates a banner. Required |
.pf-m-red | .pf-v6-c-banner | Modifies banner for red styling. |
.pf-m-orangered | .pf-v6-c-banner | Modifies banner for orangered styling. |
.pf-m-orange | .pf-v6-c-banner | Modifies banner for orange styling. |
.pf-m-yellow | .pf-v6-c-banner | Modifies banner for yellow styling. |
.pf-m-green | .pf-v6-c-banner | Modifies banner for green styling. |
.pf-m-teal | .pf-v6-c-banner | Modifies banner for teal styling. |
.pf-m-blue | .pf-v6-c-banner | Modifies banner for blue styling. |
.pf-m-purple | .pf-v6-c-banner | Modifies banner for purple styling. |
.pf-m-success | .pf-v6-c-banner | Modifies banner for success status styling. |
.pf-m-warning | .pf-v6-c-banner | Modifies banner for warning status styling. |
.pf-m-danger | .pf-v6-c-banner | Modifies banner for danger status styling. |
.pf-m-info | .pf-v6-c-banner | Modifies banner for info status styling. |
.pf-m-custom | .pf-v6-c-banner | Modifies banner for custom status styling. |
.pf-m-sticky | .pf-v6-c-banner | Modifies banner to be sticky to the top of its container. |
CSS variables
Expand or collapse column | Selector | Variable | Value | |
---|---|---|---|---|
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--PaddingBlockStart | 0.25rem | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--PaddingInlineEnd | 1rem | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--md--PaddingInlineEnd | 1.5rem | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--PaddingBlockEnd | 0.25rem | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--PaddingInlineStart | 1rem | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--md--PaddingInlineStart | 1.5rem | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--FontSize | 0.875rem | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--BackgroundColor | (In light theme) #e0e0e0 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--link--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--link--TextDecoration | underline | ||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--link--hover--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--link--hover--FontWeight | 500 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--link--disabled--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--link--disabled--TextDecoration | none | ||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-sticky--ZIndex | 300 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-sticky--BoxShadow | 0px
4px
8px
0px
rgba(0, 0, 0, 0.1200) | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-danger--BackgroundColor | (In light theme) #b1380b | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-danger--Color | (In light theme) #ffffff | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-success--BackgroundColor | (In light theme) #3d7317 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-success--Color | (In light theme) #ffffff | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-warning--BackgroundColor | (In light theme) #ffcc17 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-warning--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-info--BackgroundColor | (In light theme) #5e40be | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-info--Color | (In light theme) #ffffff | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-custom--BackgroundColor | (In light theme) #147878 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-custom--Color | (In light theme) #ffffff | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-red--BackgroundColor | (In light theme) #fbc5c5 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-red--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-orangered--BackgroundColor | (In light theme) #fbbea8 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-orangered--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-orange--BackgroundColor | (In light theme) #fccb8f | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-orange--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-yellow--BackgroundColor | (In light theme) #ffe072 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-yellow--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-green--BackgroundColor | (In light theme) #d1f1bb | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-green--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-teal--BackgroundColor | (In light theme) #b9e5e5 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-teal--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-blue--BackgroundColor | (In light theme) #b9dafc | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-blue--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-purple--BackgroundColor | (In light theme) #d0c5f4 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-purple--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-danger | --pf-v6-c-banner--BackgroundColor | (In light theme) #b1380b | ||
| ||||
.pf-v6-c-banner.pf-m-danger | --pf-v6-c-banner--Color | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-banner.pf-m-success | --pf-v6-c-banner--BackgroundColor | (In light theme) #3d7317 | ||
| ||||
.pf-v6-c-banner.pf-m-success | --pf-v6-c-banner--Color | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-banner.pf-m-warning | --pf-v6-c-banner--BackgroundColor | (In light theme) #ffcc17 | ||
| ||||
.pf-v6-c-banner.pf-m-warning | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-info | --pf-v6-c-banner--BackgroundColor | (In light theme) #5e40be | ||
| ||||
.pf-v6-c-banner.pf-m-info | --pf-v6-c-banner--Color | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-banner.pf-m-custom | --pf-v6-c-banner--BackgroundColor | (In light theme) #147878 | ||
| ||||
.pf-v6-c-banner.pf-m-custom | --pf-v6-c-banner--Color | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-banner.pf-m-red | --pf-v6-c-banner--BackgroundColor | (In light theme) #fbc5c5 | ||
| ||||
.pf-v6-c-banner.pf-m-red | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-orangered | --pf-v6-c-banner--BackgroundColor | (In light theme) #fbbea8 | ||
| ||||
.pf-v6-c-banner.pf-m-orangered | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-orange | --pf-v6-c-banner--BackgroundColor | (In light theme) #fccb8f | ||
| ||||
.pf-v6-c-banner.pf-m-orange | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-yellow | --pf-v6-c-banner--BackgroundColor | (In light theme) #ffe072 | ||
| ||||
.pf-v6-c-banner.pf-m-yellow | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-green | --pf-v6-c-banner--BackgroundColor | (In light theme) #d1f1bb | ||
| ||||
.pf-v6-c-banner.pf-m-green | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-teal | --pf-v6-c-banner--BackgroundColor | (In light theme) #b9e5e5 | ||
| ||||
.pf-v6-c-banner.pf-m-teal | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-blue | --pf-v6-c-banner--BackgroundColor | (In light theme) #b9dafc | ||
| ||||
.pf-v6-c-banner.pf-m-blue | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-purple | --pf-v6-c-banner--BackgroundColor | (In light theme) #d0c5f4 | ||
| ||||
.pf-v6-c-banner.pf-m-purple | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner a:hover:not(.pf-m-disabled) | --pf-v6-c-banner--link--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner a.pf-m-disabled | --pf-v6-c-banner--link--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner a.pf-m-disabled | --pf-v6-c-banner--link--TextDecoration | none | ||
| ||||
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline | --pf-v6-c-button--m-link--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline | --pf-v6-c-button--m-link--m-inline--hover--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline | --pf-v6-c-button--disabled--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline:hover | --pf-v6-c-banner--link--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled | --pf-v6-c-banner--link--TextDecoration | none | ||
|