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

Top/bottom

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