Interactive Homepage Hero with Single Segment

Layout Variant: H001C (Set on the Page)

Content Type: Collection

Aspect Ratio: 

• 16:9; 5:2

Expected Use:

This hero component is a variant of the H001B and allows authors to showcase a single Emerson business platform with the same sweeping, dramatic imagery and features interactions that reveal additional platform information and links as in the original split segment version, but for use cases that only need to feature one platform.

This hero component offers a clear starting point for new users. Unlike the split segment version, the H001C’s background image displays across the full viewport width. But just like the H001B, the hero reveals the platform’s core value proposition, platform landing page CTA button, and up to five additional links driving users to other key interior sections when user hovers on any part of the component. This interaction is removed for tablet and mobile screens which do not allow for hover interactions, displaying the full hero content text, CTA button and links by default.

The H001C is intended for use solely on the Emerson.com corporate homepage. No other layouts or extended sites may use this component until governance approves additional uses.

How to Build:

Since H001C 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 'h001c" on the Placement section. There are two Collections that need to be set up.

1. H001C - Collection. Nothing is added in this Collection except on the Items and setting the Layout variant.  The Teaser Title, Text, CTA Label and Image will come from the Collection you will add on the "Items" list of this H001C - Collection. Refer to sample below.  

2.  Teasers added on Items under the H001C Collection.  Your components should contain the following:

• Teaser Title - The title shown on the center of the image.
• Teaser Text - The centered body copy shown below the Title on hover. 
• Teaser CTA Label - This defaults to "Learn More" or can be overwritten by entering text in the Teaser CTA Label field. This appears on the default / hidden content state (non-hovered) under the Teaser Title.
• 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 when you hover on the image (This is hover/active content state).  Refer to image sample below.
    • Create a Teaser and add a Teaser Target, Teaser Title and Teaser CTA Label, if desired. 
    • If the "Linked Call to Action Label" is selected, add a Teasable page 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 - You can add up to 5 teasable items here displayed on the hover/active content state at the bottom of the image. The primary use case is for Page links to go to highlighted content. Note that the white CTA links pull from the Teasers Added to the "Items" list.  The Teaser Title of the teasable content is used as the CTA label. 

• Pictures and Other Media - Add a picture here. This is the image shown on the hero.
• Layout Variant is set to "Default".

Note that authors have the option to modify the background via the H001C collection Background Color section under the Content Tab.