Hero

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Examples

Basic

Basic hero content

Documentation

Usage

Class	Applied to	Outcome
`.pf-v6-c-hero`	`<div>`	Initiates the hero. Required
`.pf-v6-c-hero__body`	`<div>`	Initiates the hero body.
`.pf-m-no-glass`	`.pf-v6-c-hero`	Modifies the hero to remove glass styling when using glass theme.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-hero	--pf-v6-c-hero--PaddingBlockStart	2rem
--pf-v6-c-hero--PaddingBlockStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-hero	--pf-v6-c-hero--PaddingBlockEnd	2rem
--pf-v6-c-hero--PaddingBlockEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.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	2rem
--pf-v6-c-hero--PaddingInlineEnd --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.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) #ffffff
--pf-v6-c-hero--BackgroundColor --pf-t--global--background--color--glass--default --pf-t--global--background--color--glass--default--base --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-hero	--pf-v6-c-hero--BackdropFilter	none
--pf-v6-c-hero--BackdropFilter --pf-t--global--background--color--glass--filter --pf-t--global--background--color--glass--filter--base none
	.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) #c7c7c7
--pf-v6-c-hero--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-hero	--pf-v6-c-hero--m-glass--BorderColor	(In light theme) #ffffff
--pf-v6-c-hero--m-glass--BorderColor --pf-t--global--border--color--alt --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-hero	--pf-v6-c-hero--m-glass--BoxShadow	0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
--pf-v6-c-hero--m-glass--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-hero	--pf-v6-c-hero--BorderStartStartRadius	24px
	.pf-v6-c-hero	--pf-v6-c-hero--BorderStartEndRadius	72px
	.pf-v6-c-hero	--pf-v6-c-hero--BorderEndEndRadius	24px
	.pf-v6-c-hero	--pf-v6-c-hero--BorderEndStartRadius	72px
	.pf-v6-c-hero	--pf-v6-c-hero__body--Width	800px
	.pf-v6-c-hero	--pf-v6-c-hero__body--MaxWidth	80%
	:root:where(.pf-v6-theme-glass) .pf-v6-c-hero	--pf-v6-c-hero--BorderColor	(In light theme) #ffffff
--pf-v6-c-hero--BorderColor --pf-v6-c-hero--m-glass--BorderColor --pf-t--global--border--color--alt --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff

Edit this page on GitHub