Homepage Hero with Jump Links

Layout Variants: H001E

Content Type: Collection

Aspect Ratio: 

• 5:2 (wide 8:3); 4:3 (max height 560px); 3:4

Expected Use:

H001E Hero with Jump Links is a variant of the H001C Single-Segment Interactive Hero which displays the heading, body copy and CTA contents by default and allows for up to 5-6 jump links to content sections lower on the page.

This hero showcases a single Emerson theme or initiative compelling user to explore more with engaging heading and body text and clear CTAs to relevant subpages. This hero also offers users a high-level overview of the page’s subtopics via in-page jump link titles allowing users to easily drill down to page content that’s pertinent to their specific needs and interests. The optional CTA buttons drive users to child pages associated with the page’s current theme or messaging. Clicking on the Jump Links will automatically scroll the page to the content section corresponding to the clicked link item. 

H001E is intended for sole use on the Emerson.com corporate homepage in consultation with Corporate and Platform stakeholders. No other layouts or extended sites may use this component until governance approves additional uses.

How to Build:

A collection must be set up for H001E hero and the components should contain the following:

• Teaser Title - The Heading shown on the center of the image.
• Teaser Header - This is not currently used. 
• Teaser Text - The centered body copy shown below the Title. 
• Teaser CTA Label - This is not used in this Hero. This will come from the Teaser you will add on the Teaser Options below. 
• Teaser Options
  • Render Link to Detailed Page - This must be enabled to render linked page. 
  • Show Call to Action Button -  The CTA drives users to other related child pages or teasable content. This enables the green Call-To-Action displayed under the Teaser Title and Teaser Text.
    • If the "Linked Call to Action Label" is selected, add a page or teaser as CTA destination. The CTA Label will come from the linked page. However, if the "Custom & Linked Call to Action Label" is selected, the custom label will be displayed as CTA. 
    • The CTA Label comes from the Linked Item. If no Teaser CTA Label is defined, the CTA label defaults to "Learn More". The author can also opt to display no CTA. 
• Items - Add a collection that contains the components with enabled Jump Link Navigation setting. The primary use case is for the jump links to go to the highlighted components on the Homepage Main. The jump links are displayed in white font color minus the caret symbol and in the order it was entered on the Items. 
  • Nothing is added in this Collection except the Teaser Title, setting the Layout Variant to "Default" and adding the directly the page components that has enabled Jump Navigation with or without Alternate Title specified, Ex. Products & Services.
  •  The Teaser Header, Teaser Text, CTA Label and Image are not used in this Collection.  
  • On the Local Setting, add the following properties:
    • "callToActionState" with Integer type and set the "Value"  to "1". 
    • "callToActionDisabled" with Boolean type and click on the checkbox. 
    • "addToJumpNavFlag" with Boolean type and click on the checkbox. 
    • "jumpNavTabTitle" with String type and specify the "Value" ex. "Browse Products". 
• Pictures and Other Media - Add a picture here. This is the image shown on the hero.
• Set the Layout Variant to "h001e".
• Note that unlike H001C, all the CTA contents along with the heading and body copy are displayed by default with "h001e".

On the sample H001E Regression Page, drop the above H001E collection to the Hero section. The H001E Hero is styled by setting the Layout at the Page level for the Hero to "Default" on the Placement section. 

On the Main section,  set the placement to "Default" and add content collection. Open the relevant collection that you want to be directed to when clicking the jump navigation button, enable Jump Navigation checkbox and specifying the Alternate, if needed.