This hero component showcases the two Emerson business platforms with sweeping, dramatic imagery and features interactions that reveal additional platform information and links.
The top image represents the default state. The bottom images represent the hover states. Selecting the right images for this component is crucial. It must work as both a 50% image and a 100% image. Images must be approved by the Emerson CMO. There are no captions for this image.
This hero component showcases Emerson’s two-platform structure and 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.
Default Segment Headline: 70 (2 lines max)
Default CTA Text: 35
Hover Segment Headline: 80 (2 lines max)
Hover Body Copy: 280 (4 lines max)
Hover CTA Text: 35
Hover Link Text: 30 (2 lines max)
Asset Size: 2880px x 1620px
Asset Aspect Ratio: 16:9
Recommended File Weight: <300kb
Width: 100% viewport width
Max Height: 512px
Desktop: 5:2 (wide 8:3)
Tablet: 4:3 (max height 560px)
Mobile: 3:4
Left Image: Left 2/3 of asset
Right Image: Right 2/3 of asset