Examples
Basic
Banners can be styled with one of 5 different colors. A basic 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-screen-reader or an equivalent.
Documentation
Add a modifier class to the default banner to change the presentation: .pf-m-blue, .pf-m-red, .pf-m-green, or .pf-m-gold.
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-banner | <div> | Initiates a banner. Required |
.pf-m-blue | .pf-c-banner | Modifies banner for blue styling. |
.pf-m-red | .pf-c-banner | Modifies banner for red styling. |
.pf-m-green | .pf-c-banner | Modifies banner for green styling. |
.pf-m-gold | .pf-c-banner | Modifies banner for gold styling. |
.pf-m-sticky | .pf-c-banner | Modifies banner to be sticky to the top of its container. |
CSS variables
| .pf-c-banner.pf-m-warning | --pf-global--Color--100 | #151515 | ||
| .pf-c-banner.pf-m-warning | --pf-global--Color--200 | #6a6e73 | ||
| .pf-c-banner.pf-m-warning | --pf-global--BorderColor--100 | #d2d2d2 | ||
| .pf-c-banner.pf-m-warning | --pf-global--primary-color--100 | #06c | ||
| .pf-c-banner.pf-m-warning | --pf-global--link--Color | #06c | ||
| .pf-c-banner.pf-m-warning | --pf-global--link--Color--hover | #004080 | ||
| .pf-c-banner.pf-m-warning | --pf-global--BackgroundColor--100 | #fff | ||
| .pf-c-banner.pf-m-warning | --pf-c-banner--BackgroundColor | #f0ab00 | ||
| .pf-c-banner | --pf-global--Color--100 | #fff | ||
| .pf-c-banner | --pf-global--Color--200 | #f0f0f0 | ||
| .pf-c-banner | --pf-global--BorderColor--100 | #b8bbbe | ||
| .pf-c-banner | --pf-global--primary-color--100 | #73bcf7 | ||
| .pf-c-banner | --pf-global--link--Color | #2b9af3 | ||
| .pf-c-banner | --pf-global--link--Color--hover | #2b9af3 | ||
| .pf-c-banner | --pf-global--BackgroundColor--100 | #151515 | ||
| .pf-c-banner | --pf-c-banner--PaddingTop | 0.25rem | ||
| .pf-c-banner | --pf-c-banner--PaddingRight | 1rem | ||
| .pf-c-banner | --pf-c-banner--md--PaddingRight | 1.5rem | ||
| .pf-c-banner | --pf-c-banner--PaddingBottom | 0.25rem | ||
| .pf-c-banner | --pf-c-banner--PaddingLeft | 1rem | ||
| .pf-c-banner | --pf-c-banner--md--PaddingLeft | 1.5rem | ||
| .pf-c-banner | --pf-c-banner--FontSize | 0.875rem | ||
| .pf-c-banner | --pf-c-banner--Color | #151515 | ||
| .pf-c-banner | --pf-c-banner--BackgroundColor | #4f5255 | ||
| .pf-c-banner | --pf-c-banner--link--Color | #151515 | ||
| .pf-c-banner | --pf-c-banner--link--TextDecoration | underline | ||
| .pf-c-banner | --pf-c-banner--link--hover--Color | #151515 | ||
| .pf-c-banner | --pf-c-banner--link--hover--FontWeight | 700 | ||
| .pf-c-banner | --pf-c-banner--link--disabled--Color | #151515 | ||
| .pf-c-banner | --pf-c-banner--link--disabled--TextDecoration | none | ||
| .pf-c-banner | --pf-c-banner--m-info--BackgroundColor | #73bcf7 | ||
| .pf-c-banner | --pf-c-banner--m-danger--BackgroundColor | #c9190b | ||
| .pf-c-banner | --pf-c-banner--m-success--BackgroundColor | #3e8635 | ||
| .pf-c-banner | --pf-c-banner--m-warning--BackgroundColor | #f0ab00 | ||
| .pf-c-banner | --pf-c-banner--m-sticky--ZIndex | 300 | ||
| .pf-c-banner | --pf-c-banner--m-sticky--BoxShadow | 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18) | ||
| .pf-c-banner .pf-c-card | --pf-c-card--BackgroundColor | rgba(#030303, .32) | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-primary--Color | #06c | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-primary--hover--Color | #06c | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-primary--focus--Color | #06c | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-primary--active--Color | #06c | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-primary--BackgroundColor | #fff | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-primary--hover--BackgroundColor | #f0f0f0 | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-primary--focus--BackgroundColor | #f0f0f0 | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-primary--active--BackgroundColor | #f0f0f0 | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-secondary--Color | #fff | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-secondary--hover--Color | #fff | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-secondary--focus--Color | #fff | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-secondary--active--Color | #fff | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-secondary--BorderColor | #fff | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-secondary--hover--BorderColor | #fff | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-secondary--focus--BorderColor | #fff | ||
| .pf-c-banner .pf-c-button | --pf-c-button--m-secondary--active--BorderColor | #fff | ||
| .pf-c-banner.pf-m-info | --pf-c-banner--BackgroundColor | #73bcf7 | ||
| .pf-c-banner.pf-m-danger | --pf-c-banner--BackgroundColor | #c9190b | ||
| .pf-c-banner.pf-m-success | --pf-c-banner--BackgroundColor | #3e8635 | ||
| .pf-c-banner a:hover:not(.pf-m-disabled) | --pf-c-banner--link--Color | #151515 | ||
| .pf-c-banner a.pf-m-disabled | --pf-c-banner--link--Color | #151515 | ||
| .pf-c-banner a.pf-m-disabled | --pf-c-banner--link--TextDecoration | none | ||
| .pf-c-banner .pf-c-button.pf-m-inline | --pf-c-button--m-link--Color | #151515 | ||
| .pf-c-banner .pf-c-button.pf-m-inline | --pf-c-button--m-link--m-inline--hover--Color | #151515 | ||
| .pf-c-banner .pf-c-button.pf-m-inline | --pf-c-button--disabled--Color | #151515 | ||
| .pf-c-banner .pf-c-button.pf-m-inline:hover | --pf-c-banner--link--Color | #151515 | ||
| .pf-c-banner .pf-c-button.pf-m-inline:disabled | --pf-c-banner--link--TextDecoration | none | ||
View source on GitHub