Hero with Jump Links

Layout Variant: H002B

Content Type: Collection

Aspect Ratio: 

• 8:3; 5:2; 5:3 (max height 300px)

Expected Use:

This is a variant of the H002 Hero. This was designed specifically for use with the Events Layout Page (L080, L081, L082). This hero has styled body copy to allow for a location and date of the event to be shown under the title in the primary events layout use case. This could be used for other use cases as well. Additionally, a jump navigation is built directly into the hero to allow a user to jump to different areas on the page. This uses the same code and functionality of HTML anchor links that the jump navigation (VN004) uses. You can choose up to any four (maximum) of the components on your page and enable Jump Navigation in them to utilize this functionality in the Hero. 

How to Build H002B:

H002B is setup as a Collection with a H002B Layout Variant. The Hero Placement of the Page must be set to "Default". For the main H002B Collection, you will add a Teaser Title, Picture and Items. Your Collection should contain the following:

• Teaser Title - The main headline shown on the upper left side of the image.
• Teaser Text - This is not used. The body copy will come from the Teaser that is added on the Items List.
• Pictures and Other Media - This is the image shown on the hero. 
• Items - You will add two Items that build out the H002B.
  • The first Item is a Teaser that builds the body copy under the Title.
  • The second Item is a Collection of Collections that create the CTAs for the jump navigation links shown on the bottom part of the hero.
• Layout Variant - Set to H002B.
  • Please note this is different than all other heroes where the layout variant is set in the Placement of the Page in the Hero section that your component is on. This Hero will only function correctly if the Layout Variant is set on the main H002B Collection.
• Teaser CTA Label - Not used. The CTAs for the jump links come from the Collection you will add on the Items List.

Note that since this is a full bleed hero, this will never have a background. And so the optional Background Color is not applicable. 

Item 1 - Teaser

Create a Teaser with the following fields:

• Teaser Title - This is the first line of body copy primarily intended to specify the event location.
• Teaser Text - This is the second line of body copy primarily intended to list out the event date or dates.
• Layout Variant - Set to "Default".
• Teaser Header, Teaser CTA Label, Pictures, Items and CTAs are not used in this component. 

Item 2 - Jump Link Collection

Create a Collection of Collections that will create the jump links at the bottom of the Hero.

• The only field used in the overall "Jump Link Collection" (this is the Item 2 in the main H002B Collection) is the Items List where you will add your individual Collections for each jump link entry.
• For each individual Collection you create and add to the Items List of the Jump Link Collection, the only field you will fill out is the Teaser Title.
  • The Teaser Title is the text that shows as the jump navigation label. It is automatically styled as a hyperlink by the H002B component using the existing jump link (VN004) functionality.
  • IMPORTANT: You must also select the "Enable Jump  Navigation" in each of the Collections you add here. You also have the option to specify an "Alternate Title" as shown on the Regression Page samples. 

REMINDERS on the Page you are working on:

1. After adding the H002B on the Hero, set the Hero Placement of the Page to "Default".

2. You must also check the box on the Jump Navigation Section to enable the jump navigation on each corresponding component you want to add to the hero jump links.

• This association is done by logic onn the H002B component design. There is no direct link between the Collections that create the hyperlinks in the hero and the components with jump link enabled other than the order of their placement in the "Main" Placement of the page.
• If you have more than four (4) components enabled for jump navigation, only the first four will be recognized by the hyperlinks in the H002B hero. Further, the Teaser Title and Alternate Title of your jump link enabled components are completely ignored in this usage of the jump link navigation functionality. It will follow the Title set on the H002B.