Hero with Foreground Image

Layout Variant: H002E

Content Type: Collection

Expected Use:

A variant of the H002 hero geared toward featuring software or other product that includes a foreground image prominently portraying the product or in-situ software UI overlaying the hero background imagery. H002E is used mainly for marketing pages focused on a single software product or product suite.

This hero is intended to help build visually intrigue for software marketing pages, giving users a glimpse of the product UI in focus for the page. The H002E allows editors to author a the H1 heading for the page, optional descriptive body copy, a foreground software or product image and up to 2 primary CTA buttons. It can also be configured to display breadcrumb links when appropriate and can be styled with either a background image or color fill in either Light Mode or Dark Mode to best conform to the aesthetic of the page and topic.

**Note: It is recommended that the assets used for foreground images should be formatted to display on transparent backgrounds in order to align with the modern design aesthetic intended for this component and avoid unwanted “boxing in” of the product imagery. Avoid using for non-software or -product related marketing pages.

Alternate Options: H001D, H002B, H002C, H002D.

How to Build:

For the main Collection, you will add a Teaser Title, Picture and Items. The Layout Variant of the Collection is set to "Default" on the Placement section. Your Collection should contain the following:

• Teaser Title - The main headline shown on the upper left side of the image. 50 characters max is allowed. 
• Teaser Text - This is the optional descriptive body copy. Ideal to have 150 characters max. 
• CTAs: The optional CTAs drive to other pages or teaseable content such as External Link, Video or Download Document. 
  • You have the option to display max of two (2) CTAs on the hero below the body copy. Max of 25 characters per CTA.
  • Just select the "Use Linked Call-to-Action Label" under Teaser Options and add the optional CTA links. 
• Pictures and Other Media - For H002E, you have the option to add max of two images.
  • One is the typical hero (shown at the top in the normal hero spot) that has an H1 Title and body copy. This should be added on the Pictures and Other Media section. 
  • The recommended image file size is <300kb with aspect ratio of 16:9 and asset size of 288px x 1620px. The image display size height is 624px while the width is 100% viewport width size.
• The other picture is a foreground software or product image that is added on the Items section.
  • You just need to create a Picture component, add an image  and optional Picture Title.
  • The foreground image recommended file size is <100kb with aspect ratio of 1:1, 4:3, or 16:9 and asset size of (variable) x 720px. The foreground image display size height is 480px while the width is variable based on aspect. 
• Items - You should add the Foreground image mentioned on the second bullet under Pictures and Other Media. 
• On the Local Settings under the System Tab of the H002E Collection, the following properties must be listed to enable/disable functions:
  • "UseAsImageBackground" - This allows use of a Picture as Hero Background.
    • For H002E, you need to enable on the Local Settings under the System the "UseAsImageBackground" Boolean property to display the image. The Background Color must be set to "Default".
    • If you would opt to use a solid color as Background, you can select from any of the available options under the Content Tab's Background Color section. But remember, not to tick the "UseAsImageBackground" Local Settings. 
  • "showBreadcrumbs" - This is a Boolean property that enables/disables the display of Breadcrumbs on the top most left side just above the Teaser Title. Breadcrumbs are a navigational aid that displays the page you are currently on and its relation to the hierarchy of higher level parent pages above the current page.
  • Background Overlay: There are two Local Settings that must be enabled to display the Dark or Light Mode Background Overlay.  
    • "Overlay" - You need to tick this to enable background overlay function.
    • "overlayBackgroundTheme" - You need to enable either "#1 - Light Mode" or "#2 - Dark Mode" background overlay theme. 
    • Note: The text color changes from black to white depending on the theme selected. 
  • "callToActionState" - This is an Integer property that defines the types of CTAs displayed. For H002E, this must be set to "4".  
  • "callToActionDisabled" - This allows users to disable display of CTAs on the Hero. 
  • The following Local Settings are auto created when a Background Color is selected:
    • "backgroundToggle" - This is the shortcut to enable/disable the "Legacy (Grey)" background color. The property is auto created when the "Legacy (Grey) Background Color is selected on the Content Tab. 
    • "bgColorState" - This property setting is auto created when any of the Primary Background Color, Secondary Background Color or Accent Background Color is selected on the Content Tab. This property displays the currently selected Background Color from the said three (3) colors. 
• Layout Variant - Set to H002E. Please note this is different than all other heroes where the layout variant is set on the Placement of the Page under the Hero section. H002E will only function correctly if the Layout Variant is set in the main H002E Collection. 
• Teaser Header and Teaser CTA Label are not used on H002E.  
• Reminder: To properly display the H002D, the Layout Variant H002D must be defined in the Collection while the Hero Placement on the Page must be set to Default.