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 via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Examples

Basic

If you need finer control over the placement of text content within the <Hero>, such as when you omit a background image, adjust the bodyWidth and bodyMaxWidth properties. Be mindful of using these properties when a background image is still present and ensure there is sufficient contrast between text and any part of the image that it overlaps.

When using gradientLight or gradientDark to apply gradient backgrounds, check the color contrast to ensure proper accessibility.

Basic hero content

Props

Hero

The main Hero component that allows adjusting of its background images and gradients in different color modes (such as light and dark).
*required
Name	Type	Default	Description
backgroundSrcDark	string		Dark theme background image path of the hero
backgroundSrcLight	string		Light theme background image path of the hero
bodyMaxWidth	string		Modifies the max-width of the hero body.
bodyWidth	string		Modifies the width of the hero body.
children	React.ReactNode		Content of the hero
className	string		Additional classes added to the hero
gradientDark	{ stop1?: string; stop2?: string; stop3?: string; }		Dark theme gradient of the hero, taking any valid CSS color values for each stop property.
gradientLight	{ stop1?: string; stop2?: string; stop3?: string; }		Light theme gradient of the hero, taking any valid CSS color values for each stop property.
isGlass Beta	boolean	false	Flag indicating the hero has glass styling when glass theme is applied.

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

Edit this page on GitHub