HeroSection

Behaviors

This component supports the following behaviors:

Behavior	Properties
Animation	`animation`, `animationOptions`
Bookmark	`bookmark`, `bookmarkLevel`, `bookmarkTitle`, `bookmarkOmitFromToc`
Component Label	`label`, `labelPosition`, `labelWidth`, `labelBreak`, `required`, `enabled`, `shrinkToLabel`, `style`, `readOnly`
Publish/Subscribe	`subscribeToTopic`
Tooltip	`tooltip`, `tooltipMarkdown`, `tooltipOptions`
Styling Variant	`variant`

Properties

`backgroundTemplate`

The template for the background of the hero section

`className`

Additional CSS class names to apply to the hero section

`contentAlignment`

default: "center"

Horizontal alignment of the content within its area

`contentPlacement`

default: "bottom"

Position of the content area relative to the header

`contentTone`

default: "dark"

The tone for the content section, affecting text colors

`contentWidth`

default: "$maxWidth-content"

Width of the hero content (header + content sections)

`ctaButtonIcon`

The icon for the call-to-action button

`ctaButtonTemplate`

The template for the call-to-action button

`ctaButtonText`

The text for the call-to-action button

`fullWidthBackground`

default: true

Whether the background should span the full width of the viewport

`gap`

Gap between header and content sections

`headerAlignment`

default: "center"

Alignment of the header content

`headerTone`

default: "dark"

The tone for the header section, affecting text colors

`headerWidth`

default: "50%"

Width of the header section in horizontal layouts

`headline`

The headline text for the hero section

`image`

The image for the hero section

`imageHeight`

The height of the image

`imageWidth`

The width of the image

`mainText`

The main text content for the hero section

`mainTextTemplate`

The template for the text content in the hero section

`preamble`

The preamble text for the hero section

`subheadline`

The subheadline text for the hero section

Events

`ctaClick`

Triggered when the call-to-action button is clicked

Exposed Methods

This component does not expose any methods.

Parts

The component has some parts that can be styled through layout properties and theme variables separately:

background: The background template area of the hero section
content: The content section containing image and children
ctaButton: The call-to-action button for the hero section
header: The header section containing all text content and CTA button
headingSection: The heading section containing preamble, headline, and subheadline
headline: The headline text for the hero section
image: The image for the hero section
mainText: The main text content for the hero section
preamble: The preamble text for the hero section
subheadline: The subheadline text for the hero section

Styling

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-headline-HeroSection	none	none
backgroundColor-mainText-HeroSection	none	none
backgroundColor-preamble-HeroSection	none	none
backgroundColor-subheadline-HeroSection	none	none
direction-headline-HeroSection	none	none
direction-mainText-HeroSection	none	none
direction-preamble-HeroSection	none	none
direction-subheadline-HeroSection	none	none
fontFamily-headline-HeroSection	none	none
fontFamily-mainText-HeroSection	none	none
fontFamily-preamble-HeroSection	none	none
fontFamily-subheadline-HeroSection	none	none
fontSize-headline-HeroSection	3em	3em
fontSize-mainText-HeroSection	1.4em	1.4em
fontSize-preamble-HeroSection	none	none
fontSize-subheadline-HeroSection	2em	2em
fontStretch-headline-HeroSection	none	none
fontStretch-mainText-HeroSection	none	none
fontStretch-preamble-HeroSection	none	none
fontStretch-subheadline-HeroSection	none	none
fontStyle-headline-HeroSection	none	none
fontStyle-mainText-HeroSection	none	none
fontStyle-preamble-HeroSection	none	none
fontStyle-subheadline-HeroSection	none	none
fontVariant-headline-HeroSection	none	none
fontVariant-mainText-HeroSection	none	none
fontVariant-preamble-HeroSection	none	none
fontVariant-subheadline-HeroSection	none	none
fontWeight-headline-HeroSection	$fontWeight-bold	$fontWeight-bold
fontWeight-mainText-HeroSection	none	none
fontWeight-preamble-HeroSection	none	none
fontWeight-subheadline-HeroSection	$fontWeight-bold	$fontWeight-bold
gap-headline-HeroSection	$space-8	$space-8
gap-mainText-HeroSection	$space-4	$space-4
gap-preamble-HeroSection	none	none
gap-subheadline-HeroSection	$space-4	$space-4
letterSpacing-headline-HeroSection	none	none
letterSpacing-mainText-HeroSection	none	none
letterSpacing-preamble-HeroSection	none	none
letterSpacing-subheadline-HeroSection	none	none
lineBreak-headline-HeroSection	none	none
lineBreak-mainText-HeroSection	none	none
lineBreak-preamble-HeroSection	none	none
lineBreak-subheadline-HeroSection	none	none
lineHeight-headline-HeroSection	1.4em	1.4em
lineHeight-mainText-HeroSection	1.1em	1.1em
lineHeight-preamble-HeroSection	none	none
lineHeight-subheadline-HeroSection	1.1em	1.1em
maxWidth-content	none	none
padding-HeroSection	none	none
paddingBottom-HeroSection	$space-12	$space-12
paddingHorizontal-HeroSection	$space-12	$space-12
paddingLeft-HeroSection	none	none
paddingRight-HeroSection	none	none
paddingTop-HeroSection	$space-12	$space-12
paddingVertical-HeroSection	none	none
textAlign-headline-HeroSection	none	none
textAlign-mainText-HeroSection	none	none
textAlign-preamble-HeroSection	none	none
textAlign-subheadline-HeroSection	none	none
textAlignLast-headline-HeroSection	none	none
textAlignLast-mainText-HeroSection	none	none
textAlignLast-preamble-HeroSection	none	none
textAlignLast-subheadline-HeroSection	none	none
textColor-headline-HeroSection	$textColor-primary	$textColor-primary
textColor-mainText-HeroSection	$textColor-primary	$textColor-primary
textColor-preamble-HeroSection	$textColor-primary	$textColor-primary
textColor-subheadline-HeroSection	$textColor-primary	$textColor-primary
textDecorationColor-headline-HeroSection	none	none
textDecorationColor-mainText-HeroSection	none	none
textDecorationColor-preamble-HeroSection	none	none
textDecorationColor-subheadline-HeroSection	none	none
textDecorationLine-headline-HeroSection	none	none
textDecorationLine-mainText-HeroSection	none	none
textDecorationLine-preamble-HeroSection	none	none
textDecorationLine-subheadline-HeroSection	none	none
textDecorationStyle-headline-HeroSection	none	none
textDecorationStyle-mainText-HeroSection	none	none
textDecorationStyle-preamble-HeroSection	none	none
textDecorationStyle-subheadline-HeroSection	none	none
textDecorationThickness-headline-HeroSection	none	none
textDecorationThickness-mainText-HeroSection	none	none
textDecorationThickness-preamble-HeroSection	none	none
textDecorationThickness-subheadline-HeroSection	none	none
textIndent-headline-HeroSection	none	none
textIndent-mainText-HeroSection	none	none
textIndent-preamble-HeroSection	none	none
textIndent-subheadline-HeroSection	none	none
textShadow-headline-HeroSection	none	none
textShadow-mainText-HeroSection	none	none
textShadow-preamble-HeroSection	none	none
textShadow-subheadline-HeroSection	none	none
textTransform-headline-HeroSection	none	none
textTransform-mainText-HeroSection	none	none
textTransform-preamble-HeroSection	none	none
textTransform-subheadline-HeroSection	none	none
textUnderlineOffset-headline-HeroSection	none	none
textUnderlineOffset-mainText-HeroSection	none	none
textUnderlineOffset-preamble-HeroSection	none	none
textUnderlineOffset-subheadline-HeroSection	none	none
wordBreak-headline-HeroSection	none	none
wordBreak-mainText-HeroSection	none	none
wordBreak-preamble-HeroSection	none	none
wordBreak-subheadline-HeroSection	none	none
wordSpacing-headline-HeroSection	none	none
wordSpacing-mainText-HeroSection	none	none
wordSpacing-preamble-HeroSection	none	none
wordSpacing-subheadline-HeroSection	none	none
wordWrap-headline-HeroSection	none	none
wordWrap-mainText-HeroSection	none	none
wordWrap-preamble-HeroSection	none	none
wordWrap-subheadline-HeroSection	none	none
writingMode-headline-HeroSection	none	none
writingMode-mainText-HeroSection	none	none
writingMode-preamble-HeroSection	none	none
writingMode-subheadline-HeroSection	none	none