>>>Page Under Construction<<<

H010B - Hero with Sidebar Variant

Layout Variant: H010B

Content Type: Collection

Aspect Ratio: 

• Hero Image: Desktop: 5:3; Tablet: 5:2; Mobile: 4:3
• Sidebar Thumbnail Specs: 1:1
• Footer Icon Specs: 1:1

Expected Use:

A variant of the H010 Hero with Sidebar and Optional Footer Content that features a more consolidated display of sidebar and footer content elements, allowing the background image to expand across the full width of the viewport creating a more consistent look and feel with other Emerson heroes on the site.

Just like the original H010 hero, this hero variant includes related editorial proof points to help tell a timely platform story or highlight a campaign initiative, with the option to include up to five calls to action, including: two optional CTA buttons and three required sidebar content items. Sidebar items have a thumbnail image, headline and a kicker that describes the content type, and an optional byline and/or date beneath the sub-copy.

**Note: This component can be configured with an optional footer allowing for two additional teaser links with associated iconography. When configured with the footer, the copy block beneath the hero heading will not be displayed.

The entire area of each content teaser item is clickable. Only the optional two CTA buttons in the main hero area are click-abl

Use on top-level platform landing pages, campaigns, or select expertise pages.

AVOID WHEN : Because of space constraints, breadcrumbs are not recommended with this component and therefore pages deeper in the site should avoid this component. This should also be avoided if there are more or less than three content sidebar items.

How to Build:

For this Hero Collection, include your Teaser Title, Text and add pictures to the Hero placement of the page and apply the "Default" layout variant to the placement. The Hero is styled by setting the Layout at the Page level for the Hero to H010 in the Placement section.  CTAs are optional for this Collection. Your content must contain the following:

H010 Hero Collection

• Teaser Title: The H1 heading and main title for your hero
• Teaser Text: The subheading for your hero
• Picture: Hero image
• CTA Label: Optional CTA uses Linked CTA with either a direct link to internal site page or Content types with external link for CTA destination.
  • If used, 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". 
  • 2 or less CTAs can be used.  
• Items: Requires Sidebar Collection and optional Footer Collection
  • If one collection, this will be used as the sidebar.
  • If two collections, the first collection will be used as the footer. The second collection will be used as the sidebar.

Footer collection: 

Most teasable content can be added. The footer uses the traditional teasable fields for Images, Documents, Videos, News Teasers. Video Targets should open in lightbox on same page. Other Targets content types are expected to open in new tab or link to new page. 

• Items: Teasers or other teasable content with optional Teaser Target, Images, Teaser title, etc.
  • Images/videos render 1x1
  • Max two teasers for footer to render

Side Bar collection: 

Most teasable content can be added. The Sidebar uses the traditional teasable fields for Images, Documents, Videos, News Teasers. Video Targets should open in lightbox on same page. Other Targets content types are expected to open in new tab or link to new page. 

• Items: Teasers or other teasable content with optional Teaser Target, Images, Teaser title, etc.
  • Images/videos render 1x1 . Note: while the primary use case expects and image (or a still image for a video) you can use an icon image as well. The component will not have the same hover effect on an icon as it does for a picture. This makes for a cleaner look when rendering an icon. 
  • Maximum of three teasers for sidebar to render
  • The date shows by default on the sidebar teasers. You may optionally remove the date from one, two or all three of the sidebar items.

To remove the dates from the sidebar items you must add Settings file(s) to the System Tab of the Page that you have the hero on. Again, please note, this is done at the Page level and not on the H010 Collection.

• If you wish to remove the date from any of the items, you must first add the settings file "H010 - DisableDate" which can be found in the folder: All Content > Settings > Options > Settings. By adding this to the Linked Settings section of the System Tab on the Page you are using the H010 hero none of the teaser dates on the sidebar will be shown (i.e. all will be removed.)
• Next, to add back specific dates, you will need to add other Settings files in addition to the "H010 - DisableDate" that you added initially. These are also in the folder described above. For each date that you wish to add back, you will need a Settings file. You can use these files in any combination to add back the desired teaser dates.
  • To add back the first teaser date use the file  "H010 - DisplayDateFirstTeaser"
  • To add back the second teaser date use the file  "H010 - DisplayDateSecondTeaser"
  • To add back the third teaser date use the file  "H010 - DisplayDateThirdTeaser"
• Fore example, if you wish only for the second and third teasers to have dates, you will need the following three Settings files added to the Linked Settings of the Page: H010 - DisableDate, H010 - DisplayDateSecondTeaser, H010 - DisplayDateThirdTeaser.