Hero w/ Optional Carousel and CTAs

Layout Variant: H002, H002C

Content Type: Picture

Aspect Ratio: 

• 8:3, 5:2, 5:3 

Expected Use:

The H002 Hero and H002C with Chop Hero allow for optional CTAs and an optional carousel that provides a revolving "slide-show" of brief overviews of the platform, category or other page for each Hero slide. These Heroes are intended for use on featured landing pages as both provide a very short overview of the page topic or showcases subtopics relevant to the overall page and includes priority keywords in the headline.

H002 allows content publishers greater flexibility to showcase lifestyle and product photography in a variety of ways using the Theme, Overlay and Content Alignment settings that auto adjusts for desktop or mobile use.

As an alternative design version of the H002, the H002C with Chop and Optional Carousel is similarly intended for use on second-level platform and category landing pages. The H002C can optionally be configured as a carousel of hero slides, each highlighting a topic relevant to the platform, category or second-level page. 

On H002 or H002C carousel configurations, the heading of the first slide renders the H1 element for the page, with subsequent slide headings rendered as H2 elements. The optional carousels are intended to display up to a max 5 hero slides. The slides will rotate from off canvas to in-view for the user.

How to Build:

H002 is set up as a Picture. Items are not in use for this component. Your components should contain the following:

• Add Pictures to the Hero placement of the page and apply the layout variant to the placement. If you add multiple Pictures, they will be displayed as a carousel. A maximum of 5 pictures can be added.
• Use H002 if you want the full image hero and use H002C if you want the hero with chop. Note, you can set the background color on the chop to white, gray or other CSS designated color via the Background Color section of the Content Tab. 
• Add a Picture Title for the main headline (H1 Tag)
• Add a Picture Caption for the body copy of the picture shown under the title.
• Add one to two CTAs - The optional CTAs drive to other pages or teasable content. Maximum of two (2) CTAs can be added.    
  • Call-to-Action-Button - This is the green CTA centered under the Title and body copy.
  • 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. 
• Layout Variant is set at the Page level on the Hero Placement. Set the Layout Variant to H002 or H002C.

This Hero has optional background colors to choose from using thid basic How-To reference: Enterprise IT User Guide - H002C Background Color Change Process for a Carousel 

Moreover, below are H002 toggleable features available that can be configured by the author via the Local Settings on the System Tab:

1. Use of Dark Theme (default) or Light theme - set on the Page Level 
2. Use a Light overlay or no overlay - set on the Page Level 
3. Center align or left align CTA and text - set on the Collection Level

Authors can set both the Theme and the Overlay on the Page' Settings Tab by adding the following properties on the Local Settings.

Authors have the option to change the default "Dark" Theme Setting that displays a White body color to the "Light" Theme with a rich Black body color. 

When the optional Overlay is not enabled it displays the headline with no overlay and defaults the body copy text color to Rich Black. Overlay Off option is overridden automatically to display an overlay in the corresponding theme color on mobile. 

On the other hand, the Content Alignment and mobile settings need to be set at the Collection level with the following Local Settings. 

For H002, the Flexible Height is set to a minimum height of 400px with top padding of 96px and a bottom padding of 48px for desktop and tablet. The Text/CTA is vertically aligned to the center and allowed to expand as required. The component is flexed which grows in height, as needed to accommodate the content displayed. 

The Content Alignment left aligns the headline, body copy and CTA (s) while the "Center" option, center aligns the headline, body copy and CTA(s). When the "centerAlignmentContent" setting is not enabled, the component displays the content and the CTA button on the left-aligned orientation.  However, if the  "centerAlignmentContent" is ticked,  the content and CTA button will be aligned to display at the center of the component's content area.

Notes on the Mobile Setup:

• H002 has a minimum height of 25rem (400px) with top padding of 3rem (48px) and a bottom padding of 3rem (48px) for mobile
• Text/CTA content group vertically aligned to the top on mobile and allowed to expand as needed 
• CTAs follow established global formatting for mobile (i.e., center-aligned button group with buttons stacking vertically when viewport width is too narrow to display buttons horizontally.)
• The Component grows in height as much as needed to accommodate the content contained.
• On mobile the "Overlay: Off" optional configuration is overridden to include display of the image overlay associated with the component's configured theme (Dark or Light).