Homepage Hero with Interactive Segment Split

Layout Variant: H001B (Set on the Page)

Content Type: Collection

Aspect Ratio: 

• 8:3, 5:3, 16:9, 4:3

Expected Use:

This hero component showcases the two Emerson business platforms with sweeping, dramatic imagery and features interactions that reveal additional platform information and links. This hero offers a clear starting point for new users. Two featured images are split 50/50 and expand to reveal each platform’s core value proposition, plus five CTA’s. The first CTA leads to the platform landing page, while the others link to key interior sections. On hover, each of the 50% images will expand to 100% and reveal an expanded version of the image with additional text and CTA’s. This interaction is removed on mobile. Mobile users can select a platform and go directly to the platform landing pages.

The H001B 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:

Nothing is required in the H001B Collection other than the two Collections you are using for the main splits of the hero (these are the two images that slide when hovered over). 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 H001B in the Placement section. The Teaser Title, Text, CTA Label and Image will all come from the two Collections you will include in the Items List of the main H001B Collection. Your components should contain the following for each of the two Collections added to the Items List:

• Create a Collection for each of the two Items for the Left Side of Hero and Right Side of Hero  
  • Teaser Title - title shown on the top center of the image
  • Teaser Text - centered body copy shown below the Title on hover (this does not appear in the non-hover state)
  • Teaser CTA Label - this defaults to "Learn More" or can be overwritten by entering text in the Teaser CTA Label field. This appears in the default state (non-hovered) for the image under the Teaser Title
  • Call-to-Action-Button - this is the green CTA centered under the Title and body copy when you hover over the image. Set to "Linked-Call-to-Action" and add a Page for the CTA destination (other teasable content could be used here). The CTA Label comes from the Linked Item. If no Teaser CTA Label is defined, the CTA label defaults to "Learn More". 
  • Items - You will add up to 5 teasable items here that show along the bottom of the image when hovered over. The primary use case is for Page links to highlighted content. The Teaser Title of the teasable content is used as the label that appears.
  • Pictures and Other Media - include a picture here which is the image shown in the hero.
  • Layout Variant is "Default"