Hero with Offset Copy and

Case Study with Optional Subheading & Byline

Layout Variant: H008, H008B

Content Type: Collection

Aspect Ratio: 

• 16:9, 4:1

Expected Use:

The H008 component is a hero used at the top of the page with offset copy that includes a mini-descriptor or optional eyebrow (such as “Case Study”), a headline and an optional sub-headline. Note that the H008 component has been superseded by the newer H008B Case Study Hero with Optional Subheading & Byline Content to offer editors more flexible authoring configuration options. Please use H008C instead of H008 for all future authoring of case study hero content.

Typically used to feature a case study or stylized article and link to additional content about the author, the H008B component is a hero used at the top of the page with offset copy that includes a descriptive kicker label, a headline, a subhead (optional) and byline content. The byline can be configured by the content author to hide the publish date for pieces intended to be “evergreen” or dateless.

The byline author name is hyperlinked and is author configurable to either direct users to a page featuring more information about the associated author including additional articles they’ve written, or alternatively triggers display of an intermediary C084 Expert Detail Modal which contains additional information and links to the author’s social media accounts, bio detail page and/or attributed articles.

Do not use outside of case study and thought leadership articles.

How to Build H008:

Note that unlike most heroes, the Layout Variant for H008 and H008B must be set in the Collection rather than in the Hero Placement of the Page.

H008 is setup as a Collection with a H008 Layout Variant. This Hero will only function correctly if the Layout Variant is set on the main H008 Collection. The Hero Placement of the Page must be set to "Default". Your component should contain the following: 

• Create a Collection and set the Layout Variant H008. 
• Add a Teaser Title - The main headline of the case study displayed at the bottom right of the image.
• Add a Teaser CTA Label - This refers to the mini-descriptor or optional eyebrow label shown above the main headline. Text is displayed in blue font and all caps text format.  
• Add a Teaser Header - This is the optional sub-headline shown below the main headline.
  • The sub-headline is displayed in italics by default.
  • If the author prefers to use the normal font style, just go to the "System" tab on the Collection. Find the "Local Settings", look for the "fontStyleNormal" and check the box under the "Value" column. 
• Pictures and Other Media - This is the image displayed on the component. If you add multiple pictures only the first image will be displayed. 
• No Items and CTA are used in this component. 

How to Build H008B:

The H008B should be a Collection with a H008B Layout Variant. This Hero will only function correctly if the Layout Variant is set on the main H008B Collection. The Hero Placement of the Page must be set to "Default". Set the following fields in the Collection:

• Create a Collection and set the Layout Variant H008B. 
• Teaser Title - The main headline of the case study shown at the bottom right of the image.
• Teaser CTA Label - The optional eyebrow label shown above the main headline. 
• Teaser Header - This is the optional sub-headline that sits below the main headline. The sub-headline is in italics by default.
• Pictures and Other Media - This is the image displayed on the component. If you add multiple pictures only the first one will be displayed. 
• Items - Author information can be added here: See below for creating a "Default" Collection that will be added to this Item List
• No CTAs are used in this component. The CTA for the author comes from the Collection added to the Item section.

Authors also have the option to pick and choose the background for the collection via the Background Color section of the Content Tab. 

Setting the Hyperlink in the H008B Author Byline: 

You will need to create a Collection for the author information that is used to build out the text around the hyperlink in the H008B hero. Whether linking to a Page or a C084 Modal, you will need to add the following information to this collection. This Collection will be added to the H008 Collection's Items Section as noted above. When using a Modal there are additional steps you will need to take for the modal to work.

• Teaser Title - add the author's name here. Note, the word "By" will be added automatically to the front of the name. (e.g. "By John Smith")
• Teaser CTA Label and Teaser Header - Not used.
• Teaser Text - generally the author's job title and business unit/platform. This must be entered in two separate lines on the Teaser Text. As this is simply free-form text, you can enter whatever you want for these two descriptive lines.
• Pictures and Other Media - This the head shot image of the author.
• Items:
  • To have the case study author hyperlink go to a Page: Add a page to the Items List. This will be the destination for the hyperlink when clicked.
  • To have the case study author hyperlink go to a Modal:
    • Create a C084 Expert Profile Card Collection and add it to the Items List. This will allow a pop-up modal to show a brief information about the author with the option of directing to social media accounts and a full detailed author page. 
    • Additionally, you will need a Local Settings entry in the H008B Collection on the System Tab: This is a Boolean entry with the name "modalEnabled" and the box checked.