Banner

Examples

Basic

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. Defaults to "${variant} banner" if this prop is not passed in
variant	'default' \| 'info' \| 'danger' \| 'success' \| 'warning'	'default'	Variant styles for the banner

CSS variables


	.pf-c-banner.pf-m-warning	--pf-global--Color--100	#151515
--pf-global--Color--100 --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-banner.pf-m-warning	--pf-global--Color--200	#6a6e73
--pf-global--Color--200 --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-banner.pf-m-warning	--pf-global--BorderColor--100	#d2d2d2
--pf-global--BorderColor--100 --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-banner.pf-m-warning	--pf-global--primary-color--100	#06c
--pf-global--primary-color--100 --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-banner.pf-m-warning	--pf-global--link--Color	#06c
--pf-global--link--Color --pf-global--link--Color--dark $pf-global--link--Color--dark $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-banner.pf-m-warning	--pf-global--link--Color--hover	#004080
--pf-global--link--Color--hover --pf-global--link--Color--dark--hover $pf-global--link--Color--dark--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-banner.pf-m-warning	--pf-global--BackgroundColor--100	#fff
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-banner.pf-m-warning	--pf-c-banner--BackgroundColor	#f0ab00
--pf-c-banner--BackgroundColor --pf-c-banner--m-warning--BackgroundColor --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-banner	--pf-global--Color--100	#fff
--pf-global--Color--100 --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-banner	--pf-global--Color--200	#f0f0f0
--pf-global--Color--200 --pf-global--Color--light-200 $pf-global--Color--light-200 $pf-color-black-200 #f0f0f0
	.pf-c-banner	--pf-global--BorderColor--100	#b8bbbe
--pf-global--BorderColor--100 --pf-global--BorderColor--light-100 $pf-global--BorderColor--light-100 $pf-color-black-400 #b8bbbe
	.pf-c-banner	--pf-global--primary-color--100	#73bcf7
--pf-global--primary-color--100 --pf-global--primary-color--light-100 $pf-global--primary-color--light-100 $pf-color-blue-200 #73bcf7
	.pf-c-banner	--pf-global--link--Color	#2b9af3
--pf-global--link--Color --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-300 #2b9af3
	.pf-c-banner	--pf-global--link--Color--hover	#2b9af3
--pf-global--link--Color--hover --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-300 #2b9af3
	.pf-c-banner	--pf-global--BackgroundColor--100	#151515
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--dark-100 $pf-global--BackgroundColor--dark-100 $pf-color-black-900 #151515
	.pf-c-banner	--pf-c-banner--PaddingTop	0.25rem
--pf-c-banner--PaddingTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-banner	--pf-c-banner--PaddingRight	1rem
--pf-c-banner--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-banner	--pf-c-banner--md--PaddingRight	1.5rem
--pf-c-banner--md--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-banner	--pf-c-banner--PaddingBottom	0.25rem
--pf-c-banner--PaddingBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-banner	--pf-c-banner--PaddingLeft	1rem
--pf-c-banner--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-banner	--pf-c-banner--md--PaddingLeft	1.5rem
--pf-c-banner--md--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-banner	--pf-c-banner--FontSize	0.875rem
--pf-c-banner--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-banner	--pf-c-banner--Color	#151515
--pf-c-banner--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-banner	--pf-c-banner--BackgroundColor	#4f5255
--pf-c-banner--BackgroundColor --pf-global--BackgroundColor--dark-400 $pf-global--BackgroundColor--dark-400 $pf-color-black-700 #4f5255
	.pf-c-banner	--pf-c-banner--link--Color	#151515
--pf-c-banner--link--Color --pf-c-banner--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-banner	--pf-c-banner--link--TextDecoration	underline
	.pf-c-banner	--pf-c-banner--link--hover--Color	#151515
--pf-c-banner--link--hover--Color --pf-c-banner--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-banner	--pf-c-banner--link--hover--FontWeight	700
--pf-c-banner--link--hover--FontWeight --pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold $pf-global--FontWeight--bold 700
	.pf-c-banner	--pf-c-banner--link--disabled--Color	#151515
--pf-c-banner--link--disabled--Color --pf-c-banner--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-banner	--pf-c-banner--link--disabled--TextDecoration	none
	.pf-c-banner	--pf-c-banner--m-info--BackgroundColor	#73bcf7
--pf-c-banner--m-info--BackgroundColor --pf-global--palette--blue-200 $pf-color-blue-200 #73bcf7
	.pf-c-banner	--pf-c-banner--m-danger--BackgroundColor	#c9190b
--pf-c-banner--m-danger--BackgroundColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-banner	--pf-c-banner--m-success--BackgroundColor	#3e8635
--pf-c-banner--m-success--BackgroundColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-banner	--pf-c-banner--m-warning--BackgroundColor	#f0ab00
--pf-c-banner--m-warning--BackgroundColor --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-banner	--pf-c-banner--m-sticky--ZIndex	300
--pf-c-banner--m-sticky--ZIndex --pf-global--ZIndex--md $pf-global--ZIndex--md 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--m-sticky--BoxShadow --pf-global--BoxShadow--md-bottom $pf-global--BoxShadow--md-bottom 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-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-c-banner .pf-c-card	--pf-c-card--BackgroundColor	rgba(#030303, .32)
--pf-c-card--BackgroundColor --pf-global--BackgroundColor--dark-transparent-200 $pf-global--BackgroundColor--dark-transparent-200 rgba($pf-color-black-1000, .32) rgba(#030303, .32)
	.pf-c-banner .pf-c-button	--pf-c-button--m-primary--Color	#06c
--pf-c-button--m-primary--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-banner .pf-c-button	--pf-c-button--m-primary--hover--Color	#06c
--pf-c-button--m-primary--hover--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-banner .pf-c-button	--pf-c-button--m-primary--focus--Color	#06c
--pf-c-button--m-primary--focus--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-banner .pf-c-button	--pf-c-button--m-primary--active--Color	#06c
--pf-c-button--m-primary--active--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-banner .pf-c-button	--pf-c-button--m-primary--BackgroundColor	#fff
--pf-c-button--m-primary--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-banner .pf-c-button	--pf-c-button--m-primary--hover--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-banner .pf-c-button	--pf-c-button--m-primary--focus--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--focus--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-banner .pf-c-button	--pf-c-button--m-primary--active--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--active--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-banner .pf-c-button	--pf-c-button--m-secondary--Color	#fff
--pf-c-button--m-secondary--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-banner .pf-c-button	--pf-c-button--m-secondary--hover--Color	#fff
--pf-c-button--m-secondary--hover--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-banner .pf-c-button	--pf-c-button--m-secondary--focus--Color	#fff
--pf-c-button--m-secondary--focus--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-banner .pf-c-button	--pf-c-button--m-secondary--active--Color	#fff
--pf-c-button--m-secondary--active--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-banner .pf-c-button	--pf-c-button--m-secondary--BorderColor	#fff
--pf-c-button--m-secondary--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-banner .pf-c-button	--pf-c-button--m-secondary--hover--BorderColor	#fff
--pf-c-button--m-secondary--hover--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-banner .pf-c-button	--pf-c-button--m-secondary--focus--BorderColor	#fff
--pf-c-button--m-secondary--focus--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-banner .pf-c-button	--pf-c-button--m-secondary--active--BorderColor	#fff
--pf-c-button--m-secondary--active--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-banner.pf-m-info	--pf-c-banner--BackgroundColor	#73bcf7
--pf-c-banner--BackgroundColor --pf-c-banner--m-info--BackgroundColor --pf-global--palette--blue-200 $pf-color-blue-200 #73bcf7
	.pf-c-banner.pf-m-danger	--pf-c-banner--BackgroundColor	#c9190b
--pf-c-banner--BackgroundColor --pf-c-banner--m-danger--BackgroundColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-banner.pf-m-success	--pf-c-banner--BackgroundColor	#3e8635
--pf-c-banner--BackgroundColor --pf-c-banner--m-success--BackgroundColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-banner a:hover:not(.pf-m-disabled)	--pf-c-banner--link--Color	#151515
--pf-c-banner--link--Color --pf-c-banner--link--hover--Color --pf-c-banner--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-banner a.pf-m-disabled	--pf-c-banner--link--Color	#151515
--pf-c-banner--link--Color --pf-c-banner--link--disabled--Color --pf-c-banner--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-banner a.pf-m-disabled	--pf-c-banner--link--TextDecoration	none
--pf-c-banner--link--TextDecoration --pf-c-banner--link--disabled--TextDecoration none
	.pf-c-banner .pf-c-button.pf-m-inline	--pf-c-button--m-link--Color	#151515
--pf-c-button--m-link--Color --pf-c-banner--link--Color --pf-c-banner--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-banner .pf-c-button.pf-m-inline	--pf-c-button--m-link--m-inline--hover--Color	#151515
--pf-c-button--m-link--m-inline--hover--Color --pf-c-banner--link--hover--Color --pf-c-banner--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-banner .pf-c-button.pf-m-inline	--pf-c-button--disabled--Color	#151515
--pf-c-button--disabled--Color --pf-c-banner--link--disabled--Color --pf-c-banner--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-banner .pf-c-button.pf-m-inline:hover	--pf-c-banner--link--Color	#151515
--pf-c-banner--link--Color --pf-c-banner--link--hover--Color --pf-c-banner--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-banner .pf-c-button.pf-m-inline:disabled	--pf-c-banner--link--TextDecoration	none
--pf-c-banner--link--TextDecoration --pf-c-banner--link--disabled--TextDecoration none

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines