HeroSection
HeroSection
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 sectioncontent: The content section containing image and childrenctaButton: The call-to-action button for the hero sectionheader: The header section containing all text content and CTA buttonheadingSection: The heading section containing preamble, headline, and subheadlineheadline: The headline text for the hero sectionimage: The image for the hero sectionmainText: The main text content for the hero sectionpreamble: The preamble text for the hero sectionsubheadline: 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 |