Hero with Jump Links

Layout Variant: H002B

Content Type: Collection

Aspect Ratio: 

• TBD

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 Nav in them to utilize this functionality in the Hero. 

How to Build:

For the main Collection, you will add a Teaser Title, Picture and Items. The Layout Variant of the Collection is set to H002B in the Placement section. 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 be entered in the Teaser that is placed in the Items List
• Pictures and Other Media - This includes a picture here which is the image shown in the hero. 
• Items - You will add two Items that build out the hero. 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 across the bottom 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 will only function correctly if the Layout Variant is set in the main H002B Collection.
• Teaser CTA Label - Not used. The CTAs for the jump links come from the Collection you will add to the Items List.

Item 1 - Teaser

Create a Teaser with the following fields:

• Teaser Title - This is the first line of body copy intended to be the event location in the primary use case
• Teaser Text - This is the second line of body copy intended to be the event date in the primary use case
• Layout Variant - Set to Default

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 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.

Remember: You must also check "Enable Jump Navigation" on each corresponding component you want to add to the hero jump links. This association is done by logic in 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 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.