Hero with Offset Text and Optional Left-Aligned Image

Layout Variant: H008C

Content Type: Collection

Aspect Ratio: 

• 4:3

Expected Use:

H00C8 is primarily intended for use on press releases, but can also be used on case studies and other news-related article content page types.

Similar to its B version, the H008C component is a hero used at the top of the page with offset header copy that includes a category mini-descriptor (“eyebrow” such as "Case Study") label, headline and subhead (optional), but also includes an optional left-aligned feature image that can be accompanied by an image caption (optional) and link (optional) to download a high resolution version of the image asset displayed.

The H008C was designed to keep offset header content aligned with the left edge of article body copy below when arranged in a 2-column layout using a C044 Rich Text Wide component. However, this hero may alternatively be used with article content arranged in single-column layouts using the C034 Rich Text component as well. 

How to Build H008C:

H008C should be a Collection with a H008C Layout Variant. Note, unlike most heroes, the Layout Variant must be set in the Collection rather than in the Hero Placement of the Page. The component is designed with flexibility in which fields you choose to populate and display allowing the author to create several variations depending on their needs. Below are the steps to setup H00C8.  

• Create a Collection and set the Layout Variant H008C. 
• Add a Teaser Title - The headline of the case study shown at the right of the image.
• Add Teaser CTA Label - The eyebrow or mini-descriptor displayed on top of the Teaser Title. This is a small blue title in all caps that sits immediately above the main title. The eyebrow text is optional and can be omitted if not needed.
• Add a Teaser Header - The subheadline shown below the Teaser Title. The default format is in Italics. This can be eliminated if it is not needed for the author's use case.
• Add a Teaser Text - The caption shown below the image. This is optional and can be omitted.
  • By default, the normal font is in Italics. If an author has a different use case (generally outside of press releases) the subheadline text can be changed to normal font in the Local Settings  under the System tab of the teaser.
  • You have the option to include a link to download a high-resolution version of the displayed image. To enable download of a high-resolution image, type in "Download Hi-res image", highlight this, click on create an external link and add the picture URL. This URL will be the destination for the link when clicked.
• Pictures and Other Media - This includes an optional left aligned image displayed on the component. If you add multiple pictures, only the first will be displayed. This can be eliminated if it is not needed for the author's use case.
• While this is similar to the H004, the alignment of the text is left justified and positioned to match the C044/C034 case study layout. 
• No Items and CTA are used in this component. 
• Ensure to set the following on the "System Tab" --> "Local Settings",
  • modalEnabled - unchecked
  • fontStyleNormal -  unchecked 
  • The "callToActionDisabled" is ticked.

Note that the background color for H008c should not be modified.