Homepage Hero (Light Variant)

Layout Variants: H001D

Content Type: Picture

Aspect Ratio: 

• 16:9; 8:3

Expected Use:

This Hero is a stylistic variant of the H001 Homepage Hero component that is intended for use with lighter and/or product related background imagery to  feature homepage or campaign content with a powerful marketing message.

The H001D hero is intended for optional use only on a homepage for Emerson’s Other Approved Sites. Other use cases may be approved in consultation with Corporate and Platform stakeholders. Unlike standard heroes that feature white text and a darkened overlay in front of the background image, the H001D is designed with dark text to stand out over a lighter imagery geared more toward the display of product marketing.

The hero title represents the H1 headline for the homepage and should ideally include an important keyword. The description text allows for additional keyword optimized copy describing the site or brand’s value proposition, or relate product offering, and the hero can include up to 2 CTA buttons. To ensure a readable contrast between text and background imagery for mobile displays, the text color changes to the standard white style and the darkened overlay becomes visible in front of the background image.

How to Build:

H001D is set up as a Picture. Items are not in use for this component. Your components should contain the following:

• Since this is a Hero, the Layout Variant of the collection is set to "Default".  The Hero is styled by setting the Layout at the Page level for the Hero to H001D in the Placement section. 
• Add a Picture (Hero Image) to the Hero - this displays a picture on the right side of the Hero. 
• Add a Picture Title  - the headline on the image. 
• Add a Caption  - the body copy shown below the Picture Title. 
• Teaser CTA Label - The CTA drives users to other related child pages or teasable content such as page, video, external link or download.   
  • Create a Teaser and add a Teaser Target, Teaser Title and Teaser CTA Label, if desired. Set CTA Button to "Default".
  • Create an External Link content item containing the link to a picture or other media.
    • Set CTA Button to "Linked-Call-to-Action". For the CTA destination, add a Page, Teaser Target or External Link. Other teasable content could be used here. Option is available to add up to 2 CTAs. 
    • The CTA Label comes from the Linked Item. If no Teaser CTA Label is defined, the CTA label defaults to "Learn More". 

Moreover, below are H001D toggleable features available that can be configured by the author via the Local Settings on the System Tab:

1. Use of Dark Theme (default) or Light theme - set on the Page Level 
2. Use a Light overlay or no overlay - set on the Page Level 
3. Center align or left align CTA and text - set on the Collection Level

Authors can set both the Theme and the Overlay on the Page' Settings Tab by adding the following properties on the Local Settings.

Authors have the option to change the default "Dark" Theme Setting that displays a White body color to the "Light" Theme with a rich Black body color. 

When the optional Overlay is not enabled it displays the headline with no overlay and defaults the body copy text color to Rich Black. Overlay Off option is overridden automatically to display an overlay in the corresponding theme color on mobile. 

On the other hand, the Content Alignment and mobile settings need to be set at the Collection level with the following Local Settings. 

For H001D, the Flexible Height is set to a minimum height of 400px with top padding of 96px and a bottom padding of 48px for desktop and tablet. The Text/CTA is vertically aligned to the center and allowed to expand as needed. The component is flexed which grows in height, as needed to accommodate the content displayed. 

The Content Alignment left aligns the headline, body copy and CTA (s) while the "Center" option, center aligns the headline, body copy and CTA(s). When the "centerAlignmentContent" setting is not enabled, the component displays the content and the CTA button on the left-aligned orientation.  However, if the  "centerAlignmentContent" is ticked,  the content and CTA button will be aligned to display at the center of the component's content area.

Notes on the Mobile Setup:

• H002 has a minimum height of 25rem (400px) with top padding of 3rem (48px) and a bottom padding of 3rem (48px) for mobile
• Text/CTA content group vertically aligned to the top on mobile and allowed to expand as needed 
• CTAs follow established global formatting for mobile (i.e., center-aligned button group with buttons stacking vertically when viewport width is too narrow to display buttons horizontally.)
• The Component grows in height as much as needed to accommodate the content contained.
• On mobile the "Overlay: Off" optional configuration is overridden to include display of the image overlay associated with the component's configured theme (Dark or Light).