Banner

A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users. Banners are un-intrusive and non-dismissible.

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 pass in an icon inside the banner to convey the status in a way besides just color. The screenReaderText prop should also be passed in to convey the status/severity of the banner to users of certain assistive technologies such as screen readers.

In the following example, a flex layout is used inside the banner content to show one possible way to create spacing between the icons and banner text.

Props

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the banner.
className	string		Additional classes added to the banner.
isSticky	boolean	false	If set to true, the banner sticks to the top of its container
screenReaderText	string		Text announced by screen readers to indicate the type of banner. This prop should only be passed in when the banner conveys status/severity.
variant	'default' \| 'blue' \| 'red' \| 'green' \| 'gold'	'default'	Variant styles for the banner.

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