Hero with Sidebar Content

Layout Variant: H010

Content Type: Collection

Aspect Ratio: 

• 5:3

Expected Use:

• This information-dense hero component is used to help tell a timely platform story or highlight a campaign initiative, aided by related content items and relevant calls to action. It is used on top-level platform landing pages, campaigns, or select expertise pages.
• This hero component 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. The entire area of each content item is clickable. Only the optional two CTA buttons in the main hero area are click-able.

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. Videos pop up upon click.

• 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. Note that only the videos can be added directly on the Items section of the side bar.
  • Maximum of three teasers for sidebar to render
  • The date shows by default on the sidebar teasers.
    • You may optionally also set a Custom Date via the Displayed Date. When this Custom Date is defined per sidebar teaser, this overrides the published date of the page.  
    • 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.