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-v5-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-v5-c-banner | <div> | Initiates a banner. Required |
.pf-m-blue | .pf-v5-c-banner | Modifies banner for blue styling. |
.pf-m-red | .pf-v5-c-banner | Modifies banner for red styling. |
.pf-m-green | .pf-v5-c-banner | Modifies banner for green styling. |
.pf-m-gold | .pf-v5-c-banner | Modifies banner for gold styling. |
.pf-m-sticky | .pf-v5-c-banner | Modifies banner to be sticky to the top of its container. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-banner.pf-m-gold | --pf-v5-global--Color--100 | #151515 | ||
--pf-v5-global--Color--100 --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-banner.pf-m-gold | --pf-v5-global--Color--200 | #6a6e73 | ||
--pf-v5-global--Color--200 --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-banner.pf-m-gold | --pf-v5-global--BorderColor--100 | #d2d2d2 | ||
--pf-v5-global--BorderColor--100 --pf-v5-global--BorderColor--dark-100 $pf-v5-global--BorderColor--dark-100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-banner.pf-m-gold | --pf-v5-global--primary-color--100 | #06c | ||
--pf-v5-global--primary-color--100 --pf-v5-global--primary-color--dark-100 $pf-v5-global--primary-color--dark-100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-banner.pf-m-gold | --pf-v5-global--link--Color | #06c | ||
--pf-v5-global--link--Color --pf-v5-global--link--Color--dark $pf-v5-global--link--Color--dark $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-banner.pf-m-gold | --pf-v5-global--link--Color--hover | #004080 | ||
--pf-v5-global--link--Color--hover --pf-v5-global--link--Color--dark--hover $pf-v5-global--link--Color--dark--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-banner.pf-m-gold | --pf-v5-global--BackgroundColor--100 | #fff | ||
--pf-v5-global--BackgroundColor--100 --pf-v5-global--BackgroundColor--light-100 $pf-v5-global--BackgroundColor--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-banner.pf-m-gold | --pf-v5-global--icon--Color--light | #6a6e73 | ||
--pf-v5-global--icon--Color--light --pf-v5-global--icon--Color--light--dark $pf-v5-global--icon--Color--light--dark $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-banner.pf-m-gold | --pf-v5-global--icon--Color--dark | #151515 | ||
--pf-v5-global--icon--Color--dark --pf-v5-global--icon--Color--dark--dark $pf-v5-global--icon--Color--dark--dark $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-banner.pf-m-gold | --pf-v5-c-banner--BackgroundColor | #f0ab00 | ||
--pf-v5-c-banner--BackgroundColor --pf-v5-c-banner--m-gold--BackgroundColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-banner | --pf-v5-global--Color--100 | #fff | ||
--pf-v5-global--Color--100 --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-banner | --pf-v5-global--Color--200 | #f0f0f0 | ||
--pf-v5-global--Color--200 --pf-v5-global--Color--light-200 $pf-v5-global--Color--light-200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-banner | --pf-v5-global--BorderColor--100 | #b8bbbe | ||
--pf-v5-global--BorderColor--100 --pf-v5-global--BorderColor--light-100 $pf-v5-global--BorderColor--light-100 $pf-v5-color-black-400 #b8bbbe | ||||
| .pf-v5-c-banner | --pf-v5-global--primary-color--100 | #73bcf7 | ||
--pf-v5-global--primary-color--100 --pf-v5-global--primary-color--light-100 $pf-v5-global--primary-color--light-100 $pf-v5-color-blue-200 #73bcf7 | ||||
| .pf-v5-c-banner | --pf-v5-global--link--Color | #2b9af3 | ||
--pf-v5-global--link--Color --pf-v5-global--link--Color--light $pf-v5-global--link--Color--light $pf-v5-global--active-color--300 $pf-v5-color-blue-300 #2b9af3 | ||||
| .pf-v5-c-banner | --pf-v5-global--link--Color--hover | #2b9af3 | ||
--pf-v5-global--link--Color--hover --pf-v5-global--link--Color--light $pf-v5-global--link--Color--light $pf-v5-global--active-color--300 $pf-v5-color-blue-300 #2b9af3 | ||||
| .pf-v5-c-banner | --pf-v5-global--BackgroundColor--100 | #151515 | ||
--pf-v5-global--BackgroundColor--100 --pf-v5-global--BackgroundColor--dark-100 $pf-v5-global--BackgroundColor--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-banner | --pf-v5-global--icon--Color--light | #f0f0f0 | ||
--pf-v5-global--icon--Color--light --pf-v5-global--icon--Color--light--light $pf-v5-global--icon--Color--light--light $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-banner | --pf-v5-global--icon--Color--dark | #fff | ||
--pf-v5-global--icon--Color--dark --pf-v5-global--icon--Color--dark--light $pf-v5-global--icon--Color--dark--light $pf-v5-color-white #fff | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--PaddingTop | 0.25rem | ||
--pf-v5-c-banner--PaddingTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--PaddingRight | 1rem | ||
--pf-v5-c-banner--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--md--PaddingRight | 1.5rem | ||
--pf-v5-c-banner--md--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--PaddingBottom | 0.25rem | ||
--pf-v5-c-banner--PaddingBottom --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--PaddingLeft | 1rem | ||
--pf-v5-c-banner--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--md--PaddingLeft | 1.5rem | ||
--pf-v5-c-banner--md--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--FontSize | 0.875rem | ||
--pf-v5-c-banner--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--Color | #151515 | ||
--pf-v5-c-banner--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--BackgroundColor | #4f5255 | ||
--pf-v5-c-banner--BackgroundColor --pf-v5-global--BackgroundColor--dark-400 $pf-v5-global--BackgroundColor--dark-400 $pf-v5-color-black-700 #4f5255 | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--link--Color | #151515 | ||
--pf-v5-c-banner--link--Color --pf-v5-c-banner--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--link--TextDecoration | underline | ||
| .pf-v5-c-banner | --pf-v5-c-banner--link--hover--Color | #151515 | ||
--pf-v5-c-banner--link--hover--Color --pf-v5-c-banner--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--link--hover--FontWeight | 700 | ||
--pf-v5-c-banner--link--hover--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--link--disabled--Color | #151515 | ||
--pf-v5-c-banner--link--disabled--Color --pf-v5-c-banner--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--link--disabled--TextDecoration | none | ||
| .pf-v5-c-banner | --pf-v5-c-banner--m-blue--BackgroundColor | #73bcf7 | ||
--pf-v5-c-banner--m-blue--BackgroundColor --pf-v5-global--palette--blue-200 $pf-v5-color-blue-200 #73bcf7 | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--m-red--BackgroundColor | #c9190b | ||
--pf-v5-c-banner--m-red--BackgroundColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--m-green--BackgroundColor | #3e8635 | ||
--pf-v5-c-banner--m-green--BackgroundColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--m-gold--BackgroundColor | #f0ab00 | ||
--pf-v5-c-banner--m-gold--BackgroundColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--m-sticky--ZIndex | 300 | ||
--pf-v5-c-banner--m-sticky--ZIndex --pf-v5-global--ZIndex--md $pf-v5-global--ZIndex--md 300 | ||||
| .pf-v5-c-banner | --pf-v5-c-banner--m-sticky--BoxShadow | 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18) | ||
--pf-v5-c-banner--m-sticky--BoxShadow --pf-v5-global--BoxShadow--md-bottom $pf-v5-global--BoxShadow--md-bottom 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v5-color-black-1000, .18) 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba(#030303, .18) 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18) | ||||
| .pf-v5-c-banner .pf-v5-c-button | --pf-v5-c-button--m-primary--BackgroundColor | #06c | ||
--pf-v5-c-button--m-primary--BackgroundColor --pf-v5-global--primary-color--dark-100 $pf-v5-global--primary-color--dark-100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-banner.pf-m-blue | --pf-v5-c-banner--BackgroundColor | #73bcf7 | ||
--pf-v5-c-banner--BackgroundColor --pf-v5-c-banner--m-blue--BackgroundColor --pf-v5-global--palette--blue-200 $pf-v5-color-blue-200 #73bcf7 | ||||
| .pf-v5-c-banner.pf-m-red | --pf-v5-c-banner--BackgroundColor | #c9190b | ||
--pf-v5-c-banner--BackgroundColor --pf-v5-c-banner--m-red--BackgroundColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-banner.pf-m-green | --pf-v5-c-banner--BackgroundColor | #3e8635 | ||
--pf-v5-c-banner--BackgroundColor --pf-v5-c-banner--m-green--BackgroundColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-banner a:hover:not(.pf-m-disabled) | --pf-v5-c-banner--link--Color | #151515 | ||
--pf-v5-c-banner--link--Color --pf-v5-c-banner--link--hover--Color --pf-v5-c-banner--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-banner a.pf-m-disabled | --pf-v5-c-banner--link--Color | #151515 | ||
--pf-v5-c-banner--link--Color --pf-v5-c-banner--link--disabled--Color --pf-v5-c-banner--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-banner a.pf-m-disabled | --pf-v5-c-banner--link--TextDecoration | none | ||
--pf-v5-c-banner--link--TextDecoration --pf-v5-c-banner--link--disabled--TextDecoration none | ||||
| .pf-v5-c-banner .pf-v5-c-button.pf-m-inline | --pf-v5-c-button--m-link--Color | #151515 | ||
--pf-v5-c-button--m-link--Color --pf-v5-c-banner--link--Color --pf-v5-c-banner--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-banner .pf-v5-c-button.pf-m-inline | --pf-v5-c-button--m-link--m-inline--hover--Color | #151515 | ||
--pf-v5-c-button--m-link--m-inline--hover--Color --pf-v5-c-banner--link--hover--Color --pf-v5-c-banner--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-banner .pf-v5-c-button.pf-m-inline | --pf-v5-c-button--disabled--Color | #151515 | ||
--pf-v5-c-button--disabled--Color --pf-v5-c-banner--link--disabled--Color --pf-v5-c-banner--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-banner .pf-v5-c-button.pf-m-inline:hover | --pf-v5-c-banner--link--Color | #151515 | ||
--pf-v5-c-banner--link--Color --pf-v5-c-banner--link--hover--Color --pf-v5-c-banner--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-banner .pf-v5-c-button.pf-m-inline:disabled | --pf-v5-c-banner--link--TextDecoration | none | ||
--pf-v5-c-banner--link--TextDecoration --pf-v5-c-banner--link--disabled--TextDecoration none | ||||
View source on GitHub
