H002E Hero with Foreground Image

These Hero examples show the variety of possibilities that can be created for the H002E Hero. This regression page makes the best effort to show four (4) examples.

• Picture: For H002E, you can add 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. 
    • For H002E, you need to enable on the Local Settings under the System the "UseAsImageBackground" Boolean property to display the image.
    • 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. 
  • The other picture is a foreground software or product image that is added on the Items section. You just need to add a Picture component and optional Picture Title.
• 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 that the text color changes from black to white depending on the theme selected. 
• CTAs: The optional CTAs drive to other pages or teasable 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. 
• Breadcrumbs: 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. You have the option to display the Breadcrumbs on the top most left side just above the Teaser Title by enabling the "showBreadcrumbs" Boolean property under Local Settings on the System tab. 
• Note that to properly display the H002E, the Layout Variant H002E must be defined in the Collection while the Hero Placement on the Page must be set to Default.