Component Overview

The Hero Component is intended to be used as the first component on the page. This is the only component that will render flush to the header. The hero allows for an image, video or a carousel of images. If you are looking for a similar component to use further down the page, look to the CTA Image.

Configuration

• Title: optional
• Subtitle: optional
• H1 Location: Title, Subtitle or No H1
• CTA button: optional
• Style: Video, Image, Carousel
• Message Style: Cutout, Overlay (new!), Banner, Banner Overlay

Carousel Notes

• If H1 is set for the title or subtitle, that will be set on the first carousel item only
• Cutout is the only valid message style for carousel

Message Style Overlay, Additional Options

• Overlay Position: Controls the desktop placement of the message when using the Overlay message style. For mobile, the message appears below.
  • Top Left
  • Top Center
  • Top Right
  • Center Left
  • Center
  • Center Right
  • Bottom Left
  • Bottom Center
  • Bottom Right
• Overlay Text Color: Controls the color of the message (White text for Light, Black text for Dark).
  • Light
  • Dark
• Overlay Background: Toggle on if you want a semi-transparent gradient overlay covering the image to increase readability. The gradient will auto-adjust to be heavier where the message is placed.