Hero

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-hero	--pf-v6-c-hero--PaddingBlockStart	4rem
--pf-v6-c-hero--PaddingBlockStart --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-hero	--pf-v6-c-hero--PaddingBlockEnd	4rem
--pf-v6-c-hero--PaddingBlockEnd --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-hero	--pf-v6-c-hero--PaddingInlineStart	4rem
--pf-v6-c-hero--PaddingInlineStart --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-hero	--pf-v6-c-hero--PaddingInlineEnd	4rem
--pf-v6-c-hero--PaddingInlineEnd --pf-t--global--spacer--3xl --pf-t--global--spacer--700 4rem
	.pf-v6-c-hero	--pf-v6-c-hero--gradient--angle	109deg
	.pf-v6-c-hero	--pf-v6-c-hero--gradient--stop-1--light	transparent
	.pf-v6-c-hero	--pf-v6-c-hero--gradient--stop-2--light	transparent
	.pf-v6-c-hero	--pf-v6-c-hero--gradient--stop-3--light	transparent
	.pf-v6-c-hero	--pf-v6-c-hero--gradient--stop-1--dark	transparent
	.pf-v6-c-hero	--pf-v6-c-hero--gradient--stop-2--dark	transparent
	.pf-v6-c-hero	--pf-v6-c-hero--gradient--stop-3--dark	transparent
	.pf-v6-c-hero	--pf-v6-c-hero--BackgroundColor	(In light theme) rgb(199, 199, 199, 0.2500)
--pf-v6-c-hero--BackgroundColor --pf-t--global--background--color--tertiary--default --pf-t--global--background--color--600 rgb(199, 199, 199, 0.2500)
	.pf-v6-c-hero	--pf-v6-c-hero--BackgroundImage--light	none
	.pf-v6-c-hero	--pf-v6-c-hero--BackgroundImage--dark	none
	.pf-v6-c-hero	--pf-v6-c-hero--BackgroundRepeat	no-repeat
	.pf-v6-c-hero	--pf-v6-c-hero--BackgroundPosition	right center
	.pf-v6-c-hero	--pf-v6-c-hero--BackgroundSize	contain
	.pf-v6-c-hero	--pf-v6-c-hero--BorderStyle	solid
	.pf-v6-c-hero	--pf-v6-c-hero--BorderBlockStartWidth	1px
--pf-v6-c-hero--BorderBlockStartWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	.pf-v6-c-hero	--pf-v6-c-hero--BorderBlockEndWidth	1px
--pf-v6-c-hero--BorderBlockEndWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	.pf-v6-c-hero	--pf-v6-c-hero--BorderInlineStartWidth	1px
--pf-v6-c-hero--BorderInlineStartWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	.pf-v6-c-hero	--pf-v6-c-hero--BorderInlineEndWidth	1px
--pf-v6-c-hero--BorderInlineEndWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	.pf-v6-c-hero	--pf-v6-c-hero--BorderColor	(In light theme) #e0e0e0
--pf-v6-c-hero--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-hero	--pf-v6-c-hero--BorderStartStartRadius	16px
--pf-v6-c-hero--BorderStartStartRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-hero	--pf-v6-c-hero--BorderStartEndRadius	48px
	.pf-v6-c-hero	--pf-v6-c-hero--BorderEndEndRadius	16px
--pf-v6-c-hero--BorderEndEndRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-hero	--pf-v6-c-hero--BorderEndStartRadius	48px
	.pf-v6-c-hero	--pf-v6-c-hero__body--Width	800px
	.pf-v6-c-hero	--pf-v6-c-hero__body--MaxWidth	80%
	.pf-v6-c-hero	--pf-v6-c-hero--m-glass--BackgroundColor	initial
--pf-v6-c-hero--m-glass--BackgroundColor --pf-t--global--background--color--glass--primary--default initial
	.pf-v6-c-hero	--pf-v6-c-hero--m-glass--BackdropFilter	initial
--pf-v6-c-hero--m-glass--BackdropFilter --pf-t--global--background--filter--glass--blur--primary initial
	.pf-v6-c-hero	--pf-v6-c-hero--m-glass--BorderColor	initial
--pf-v6-c-hero--m-glass--BorderColor --pf-t--global--border--color--glass--default initial
	.pf-v6-c-hero	--pf-v6-c-hero--m-glass--BoxShadow	0px 4px 10px 0px rgb(41, 41, 41, 0.1500)
--pf-v6-c-hero--m-glass--BoxShadow --pf-t--global--box-shadow--glass--default --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 10px 0px rgb(41, 41, 41, 0.1500)
	:where(.pf-v6-theme-glass) .pf-v6-c-hero.pf-m-glass	--pf-v6-c-hero--BorderColor	initial
--pf-v6-c-hero--BorderColor --pf-v6-c-hero--m-glass--BorderColor --pf-t--global--border--color--glass--default initial
	:where(.pf-v6-theme-glass) .pf-v6-c-hero.pf-m-glass	--pf-v6-c-hero--BackgroundColor	initial
--pf-v6-c-hero--BackgroundColor --pf-v6-c-hero--m-glass--BackgroundColor --pf-t--global--background--color--glass--primary--default initial