Hero

BetterUp's hero module is intended to be used at the top of a page. It can vary in its layout in content, but generally, all hero uses must contain a Headline.

Good rules of thumb:

• If you're using a hero with a background image of a person's face, avoid covering the face with text.
• If you're using a hero with a background image, choose the text color that is most perceivable for the user.
• Using a hero at a location in the page that's not the top will result in a lot of extra spacing at the top of the hero. This is to accommodate the nav overlay on the hero. For sections lower on the page, use a 1 column module instead.

Fields

• 
  Background

  See background.

• 
  Add Form

  Check this box to add a form to your hero. The form will appear on the right side of the hero on desktop, and below the rest of the content on mobile. Note that this will limit other spacing options within the module.

  For assistance in choosing the correct form, reach out to MOPs.

• 
  Hero Height

  Sets how tall your hero will be. Options are:

  • Full viewport - nothing is visible above the fold on page load except for your hero.
  • Fit content - the hero height will adjust to fit your content. This is best when you don't have a background image with a person's face in it, or if you don't need a taller hero.
• 
  Text Content Dropdown

  By default, the Text Content dropdown is collapsed. Click it to reveal fields for inputting text into your module. Click it again to re-collapse.

• 
  Text alignment

  In the Text Content dropdown. Choose how your text should be laid out on desktop. Options are:

  • Left
  • Right
  • Center
• 
  Eyebrow

  In the Text Content dropdown. Add an eyebrow to your hero. The eyebrow will be in all caps, and be smaller text above the heading. Note that eyebrows should be short - just a few words, and not a full sentence.

• 
  Headline

  In the Text Content dropdown. Headline for your hero. This field is required. Your headline will be an H1 tag on the page.

• 
  Headline Size

  In the Text Content dropdown. Choose a small (H7 style) or large (H1 style) size for your headline. If your headline is longer, H7 is recommended.

• 
  Subheadline

  In the Text Content dropdown. Add a short description under your headline.

• 
  Subheadline Size

  If a Subheadline is added, an option will appear to select the size of the subheadline. Options are:

  • Small
  • Normal
  • Large
• 
  Description

  If you add a form to your hero, you'll see the option for a longer form Description instead of a Subheadline. This field allows more formatting options than a Subheadline.

• 
  Mobile Text Layout

  In the Text Content dropdown. Choose how your text should be laid out on mobile. Note that this option is only available for Full Viewport & Short hero modules.

  Options are:

  • Bottom - Text will be grouped at the bottom of the hero on mobile.
  • Middle - Text will be grouped in the vertical center of the hero on mobile.
  • Top - Text will be grouped at the top of the hero on mobile.
  • Headline at top, rest of content at bottom
  • Headline & subheadline at top, CTAs at bottom
• 
  Configure CTAs

  See CTA.

• 
  Add a video CTA

  See Video CTA.

• 
  Add an anchor

  See Anchor.