Banner

A banner is a short message that is shared with users in an unobtrusive, full-width container that cannot be dismissed.

Examples

Basic

Top/bottom

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-banner	--pf-v6-c-banner--PaddingBlockStart	0.25rem
--pf-v6-c-banner--PaddingBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-banner	--pf-v6-c-banner--PaddingInlineEnd	1rem
--pf-v6-c-banner--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-banner	--pf-v6-c-banner--md--PaddingInlineEnd	1.5rem
--pf-v6-c-banner--md--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-banner	--pf-v6-c-banner--PaddingBlockEnd	0.25rem
--pf-v6-c-banner--PaddingBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-banner	--pf-v6-c-banner--PaddingInlineStart	1rem
--pf-v6-c-banner--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-banner	--pf-v6-c-banner--md--PaddingInlineStart	1.5rem
--pf-v6-c-banner--md--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-banner	--pf-v6-c-banner--FontSize	0.875rem
--pf-v6-c-banner--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-banner	--pf-v6-c-banner--Color	(In light theme) #151515
--pf-v6-c-banner--Color --pf-t--global--text--color--nonstatus--on-gray--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner	--pf-v6-c-banner--BackgroundColor	(In light theme) #e0e0e0
--pf-v6-c-banner--BackgroundColor --pf-t--global--color--nonstatus--gray--default --pf-t--global--color--nonstatus--gray--100 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-banner	--pf-v6-c-banner--link--Color	(In light theme) #151515
--pf-v6-c-banner--link--Color --pf-v6-c-banner--Color --pf-t--global--text--color--nonstatus--on-gray--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner	--pf-v6-c-banner--link--TextDecoration	underline
	.pf-v6-c-banner	--pf-v6-c-banner--link--hover--Color	(In light theme) #151515
--pf-v6-c-banner--link--hover--Color --pf-v6-c-banner--Color --pf-t--global--text--color--nonstatus--on-gray--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner	--pf-v6-c-banner--link--disabled--Color	(In light theme) #a3a3a3
--pf-v6-c-banner--link--disabled--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-banner	--pf-v6-c-banner--m-sticky--ZIndex	300
--pf-v6-c-banner--m-sticky--ZIndex --pf-t--global--z-index--md --pf-t--global--z-index--300 300
	.pf-v6-c-banner	--pf-v6-c-banner--m-sticky--BoxShadow	0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
--pf-v6-c-banner--m-sticky--BoxShadow --pf-t--global--box-shadow--md --pf-t--global--box-shadow--X--md--default --pf-t--global--box-shadow--Y--md--default --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md--default --pf-t--global--box-shadow--color--md--default --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--600 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--100 0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
	.pf-v6-c-banner	--pf-v6-c-banner--m-danger--BackgroundColor	(In light theme) #b1380b
--pf-v6-c-banner--m-danger--BackgroundColor --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-banner	--pf-v6-c-banner--m-danger--Color	(In light theme) #ffffff
--pf-v6-c-banner--m-danger--Color --pf-t--global--text--color--status--on-danger--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-banner	--pf-v6-c-banner--m-success--BackgroundColor	(In light theme) #3d7317
--pf-v6-c-banner--m-success--BackgroundColor --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-banner	--pf-v6-c-banner--m-success--Color	(In light theme) #ffffff
--pf-v6-c-banner--m-success--Color --pf-t--global--text--color--status--on-success--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-banner	--pf-v6-c-banner--m-warning--BackgroundColor	(In light theme) #ffcc17
--pf-v6-c-banner--m-warning--BackgroundColor --pf-t--global--color--status--warning--default --pf-t--global--color--status--warning--100 --pf-t--color--yellow--30 #ffcc17
	.pf-v6-c-banner	--pf-v6-c-banner--m-warning--Color	(In light theme) #151515
--pf-v6-c-banner--m-warning--Color --pf-t--global--text--color--status--on-warning--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner	--pf-v6-c-banner--m-info--BackgroundColor	(In light theme) #5e40be
--pf-v6-c-banner--m-info--BackgroundColor --pf-t--global--color--status--info--default --pf-t--global--color--status--info--100 --pf-t--color--purple--50 #5e40be
	.pf-v6-c-banner	--pf-v6-c-banner--m-info--Color	(In light theme) #ffffff
--pf-v6-c-banner--m-info--Color --pf-t--global--text--color--status--on-info--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-banner	--pf-v6-c-banner--m-custom--BackgroundColor	(In light theme) #147878
--pf-v6-c-banner--m-custom--BackgroundColor --pf-t--global--color--status--custom--default --pf-t--global--color--status--custom--100 --pf-t--color--teal--60 #147878
	.pf-v6-c-banner	--pf-v6-c-banner--m-custom--Color	(In light theme) #ffffff
--pf-v6-c-banner--m-custom--Color --pf-t--global--text--color--status--on-custom--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-banner	--pf-v6-c-banner--m-red--BackgroundColor	(In light theme) #fbc5c5
--pf-v6-c-banner--m-red--BackgroundColor --pf-t--global--color--nonstatus--red--default --pf-t--global--color--nonstatus--red--100 --pf-t--color--red--20 #fbc5c5
	.pf-v6-c-banner	--pf-v6-c-banner--m-red--Color	(In light theme) #151515
--pf-v6-c-banner--m-red--Color --pf-t--global--text--color--nonstatus--on-red--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner	--pf-v6-c-banner--m-orangered--BackgroundColor	(In light theme) #fbbea8
--pf-v6-c-banner--m-orangered--BackgroundColor --pf-t--global--color--nonstatus--orangered--default --pf-t--global--color--nonstatus--orangered--100 --pf-t--color--red-orange--20 #fbbea8
	.pf-v6-c-banner	--pf-v6-c-banner--m-orangered--Color	(In light theme) #151515
--pf-v6-c-banner--m-orangered--Color --pf-t--global--text--color--nonstatus--on-orangered--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner	--pf-v6-c-banner--m-orange--BackgroundColor	(In light theme) #fccb8f
--pf-v6-c-banner--m-orange--BackgroundColor --pf-t--global--color--nonstatus--orange--default --pf-t--global--color--nonstatus--orange--100 --pf-t--color--orange--20 #fccb8f
	.pf-v6-c-banner	--pf-v6-c-banner--m-orange--Color	(In light theme) #151515
--pf-v6-c-banner--m-orange--Color --pf-t--global--text--color--nonstatus--on-orange--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner	--pf-v6-c-banner--m-yellow--BackgroundColor	(In light theme) #ffe072
--pf-v6-c-banner--m-yellow--BackgroundColor --pf-t--global--color--nonstatus--yellow--default --pf-t--global--color--nonstatus--yellow--100 --pf-t--color--yellow--20 #ffe072
	.pf-v6-c-banner	--pf-v6-c-banner--m-yellow--Color	(In light theme) #151515
--pf-v6-c-banner--m-yellow--Color --pf-t--global--text--color--nonstatus--on-yellow--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner	--pf-v6-c-banner--m-green--BackgroundColor	(In light theme) #d1f1bb
--pf-v6-c-banner--m-green--BackgroundColor --pf-t--global--color--nonstatus--green--default --pf-t--global--color--nonstatus--green--100 --pf-t--color--green--20 #d1f1bb
	.pf-v6-c-banner	--pf-v6-c-banner--m-green--Color	(In light theme) #151515
--pf-v6-c-banner--m-green--Color --pf-t--global--text--color--nonstatus--on-green--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner	--pf-v6-c-banner--m-teal--BackgroundColor	(In light theme) #b9e5e5
--pf-v6-c-banner--m-teal--BackgroundColor --pf-t--global--color--nonstatus--teal--default --pf-t--global--color--nonstatus--teal--100 --pf-t--color--teal--20 #b9e5e5
	.pf-v6-c-banner	--pf-v6-c-banner--m-teal--Color	(In light theme) #151515
--pf-v6-c-banner--m-teal--Color --pf-t--global--text--color--nonstatus--on-teal--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner	--pf-v6-c-banner--m-blue--BackgroundColor	(In light theme) #b9dafc
--pf-v6-c-banner--m-blue--BackgroundColor --pf-t--global--color--nonstatus--blue--default --pf-t--global--color--nonstatus--blue--100 --pf-t--color--blue--20 #b9dafc
	.pf-v6-c-banner	--pf-v6-c-banner--m-blue--Color	(In light theme) #151515
--pf-v6-c-banner--m-blue--Color --pf-t--global--text--color--nonstatus--on-blue--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner	--pf-v6-c-banner--m-purple--BackgroundColor	(In light theme) #d0c5f4
--pf-v6-c-banner--m-purple--BackgroundColor --pf-t--global--color--nonstatus--purple--default --pf-t--global--color--nonstatus--purple--100 --pf-t--color--purple--20 #d0c5f4
	.pf-v6-c-banner	--pf-v6-c-banner--m-purple--Color	(In light theme) #151515
--pf-v6-c-banner--m-purple--Color --pf-t--global--text--color--nonstatus--on-purple--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner.pf-m-danger	--pf-v6-c-banner--BackgroundColor	(In light theme) #b1380b
--pf-v6-c-banner--BackgroundColor --pf-v6-c-banner--m-danger--BackgroundColor --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-banner.pf-m-danger	--pf-v6-c-banner--Color	(In light theme) #ffffff
--pf-v6-c-banner--Color --pf-v6-c-banner--m-danger--Color --pf-t--global--text--color--status--on-danger--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-banner.pf-m-success	--pf-v6-c-banner--BackgroundColor	(In light theme) #3d7317
--pf-v6-c-banner--BackgroundColor --pf-v6-c-banner--m-success--BackgroundColor --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-banner.pf-m-success	--pf-v6-c-banner--Color	(In light theme) #ffffff
--pf-v6-c-banner--Color --pf-v6-c-banner--m-success--Color --pf-t--global--text--color--status--on-success--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-banner.pf-m-warning	--pf-v6-c-banner--BackgroundColor	(In light theme) #ffcc17
--pf-v6-c-banner--BackgroundColor --pf-v6-c-banner--m-warning--BackgroundColor --pf-t--global--color--status--warning--default --pf-t--global--color--status--warning--100 --pf-t--color--yellow--30 #ffcc17
	.pf-v6-c-banner.pf-m-warning	--pf-v6-c-banner--Color	(In light theme) #151515
--pf-v6-c-banner--Color --pf-v6-c-banner--m-warning--Color --pf-t--global--text--color--status--on-warning--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner.pf-m-info	--pf-v6-c-banner--BackgroundColor	(In light theme) #5e40be
--pf-v6-c-banner--BackgroundColor --pf-v6-c-banner--m-info--BackgroundColor --pf-t--global--color--status--info--default --pf-t--global--color--status--info--100 --pf-t--color--purple--50 #5e40be
	.pf-v6-c-banner.pf-m-info	--pf-v6-c-banner--Color	(In light theme) #ffffff
--pf-v6-c-banner--Color --pf-v6-c-banner--m-info--Color --pf-t--global--text--color--status--on-info--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-banner.pf-m-custom	--pf-v6-c-banner--BackgroundColor	(In light theme) #147878
--pf-v6-c-banner--BackgroundColor --pf-v6-c-banner--m-custom--BackgroundColor --pf-t--global--color--status--custom--default --pf-t--global--color--status--custom--100 --pf-t--color--teal--60 #147878
	.pf-v6-c-banner.pf-m-custom	--pf-v6-c-banner--Color	(In light theme) #ffffff
--pf-v6-c-banner--Color --pf-v6-c-banner--m-custom--Color --pf-t--global--text--color--status--on-custom--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-banner.pf-m-red	--pf-v6-c-banner--BackgroundColor	(In light theme) #fbc5c5
--pf-v6-c-banner--BackgroundColor --pf-v6-c-banner--m-red--BackgroundColor --pf-t--global--color--nonstatus--red--default --pf-t--global--color--nonstatus--red--100 --pf-t--color--red--20 #fbc5c5
	.pf-v6-c-banner.pf-m-red	--pf-v6-c-banner--Color	(In light theme) #151515
--pf-v6-c-banner--Color --pf-v6-c-banner--m-red--Color --pf-t--global--text--color--nonstatus--on-red--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner.pf-m-orangered	--pf-v6-c-banner--BackgroundColor	(In light theme) #fbbea8
--pf-v6-c-banner--BackgroundColor --pf-v6-c-banner--m-orangered--BackgroundColor --pf-t--global--color--nonstatus--orangered--default --pf-t--global--color--nonstatus--orangered--100 --pf-t--color--red-orange--20 #fbbea8
	.pf-v6-c-banner.pf-m-orangered	--pf-v6-c-banner--Color	(In light theme) #151515
--pf-v6-c-banner--Color --pf-v6-c-banner--m-orangered--Color --pf-t--global--text--color--nonstatus--on-orangered--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner.pf-m-orange	--pf-v6-c-banner--BackgroundColor	(In light theme) #fccb8f
--pf-v6-c-banner--BackgroundColor --pf-v6-c-banner--m-orange--BackgroundColor --pf-t--global--color--nonstatus--orange--default --pf-t--global--color--nonstatus--orange--100 --pf-t--color--orange--20 #fccb8f
	.pf-v6-c-banner.pf-m-orange	--pf-v6-c-banner--Color	(In light theme) #151515
--pf-v6-c-banner--Color --pf-v6-c-banner--m-orange--Color --pf-t--global--text--color--nonstatus--on-orange--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner.pf-m-yellow	--pf-v6-c-banner--BackgroundColor	(In light theme) #ffe072
--pf-v6-c-banner--BackgroundColor --pf-v6-c-banner--m-yellow--BackgroundColor --pf-t--global--color--nonstatus--yellow--default --pf-t--global--color--nonstatus--yellow--100 --pf-t--color--yellow--20 #ffe072
	.pf-v6-c-banner.pf-m-yellow	--pf-v6-c-banner--Color	(In light theme) #151515
--pf-v6-c-banner--Color --pf-v6-c-banner--m-yellow--Color --pf-t--global--text--color--nonstatus--on-yellow--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner.pf-m-green	--pf-v6-c-banner--BackgroundColor	(In light theme) #d1f1bb
--pf-v6-c-banner--BackgroundColor --pf-v6-c-banner--m-green--BackgroundColor --pf-t--global--color--nonstatus--green--default --pf-t--global--color--nonstatus--green--100 --pf-t--color--green--20 #d1f1bb
	.pf-v6-c-banner.pf-m-green	--pf-v6-c-banner--Color	(In light theme) #151515
--pf-v6-c-banner--Color --pf-v6-c-banner--m-green--Color --pf-t--global--text--color--nonstatus--on-green--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner.pf-m-teal	--pf-v6-c-banner--BackgroundColor	(In light theme) #b9e5e5
--pf-v6-c-banner--BackgroundColor --pf-v6-c-banner--m-teal--BackgroundColor --pf-t--global--color--nonstatus--teal--default --pf-t--global--color--nonstatus--teal--100 --pf-t--color--teal--20 #b9e5e5
	.pf-v6-c-banner.pf-m-teal	--pf-v6-c-banner--Color	(In light theme) #151515
--pf-v6-c-banner--Color --pf-v6-c-banner--m-teal--Color --pf-t--global--text--color--nonstatus--on-teal--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner.pf-m-blue	--pf-v6-c-banner--BackgroundColor	(In light theme) #b9dafc
--pf-v6-c-banner--BackgroundColor --pf-v6-c-banner--m-blue--BackgroundColor --pf-t--global--color--nonstatus--blue--default --pf-t--global--color--nonstatus--blue--100 --pf-t--color--blue--20 #b9dafc
	.pf-v6-c-banner.pf-m-blue	--pf-v6-c-banner--Color	(In light theme) #151515
--pf-v6-c-banner--Color --pf-v6-c-banner--m-blue--Color --pf-t--global--text--color--nonstatus--on-blue--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner.pf-m-purple	--pf-v6-c-banner--BackgroundColor	(In light theme) #d0c5f4
--pf-v6-c-banner--BackgroundColor --pf-v6-c-banner--m-purple--BackgroundColor --pf-t--global--color--nonstatus--purple--default --pf-t--global--color--nonstatus--purple--100 --pf-t--color--purple--20 #d0c5f4
	.pf-v6-c-banner.pf-m-purple	--pf-v6-c-banner--Color	(In light theme) #151515
--pf-v6-c-banner--Color --pf-v6-c-banner--m-purple--Color --pf-t--global--text--color--nonstatus--on-purple--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner a:hover:not(.pf-m-disabled)	--pf-v6-c-banner--link--Color	(In light theme) #151515
--pf-v6-c-banner--link--Color --pf-v6-c-banner--link--hover--Color --pf-v6-c-banner--Color --pf-t--global--text--color--nonstatus--on-gray--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner a.pf-m-disabled	--pf-v6-c-banner--link--Color	(In light theme) #a3a3a3
--pf-v6-c-banner--link--Color --pf-v6-c-banner--link--disabled--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-banner .pf-v6-c-button.pf-m-inline	--pf-v6-c-button--m-link--Color	(In light theme) #151515
--pf-v6-c-button--m-link--Color --pf-v6-c-banner--link--Color --pf-v6-c-banner--Color --pf-t--global--text--color--nonstatus--on-gray--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner .pf-v6-c-button.pf-m-inline	--pf-v6-c-button--m-link--hover--Color	(In light theme) #151515
--pf-v6-c-button--m-link--hover--Color --pf-v6-c-banner--link--hover--Color --pf-v6-c-banner--Color --pf-t--global--text--color--nonstatus--on-gray--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-banner .pf-v6-c-button.pf-m-inline	--pf-v6-c-button--disabled--Color	(In light theme) #a3a3a3
--pf-v6-c-button--disabled--Color --pf-v6-c-banner--link--disabled--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3

View source on GitHub