Hero with Jump Links

Layout Variant: H009B

Content Type: Collection

Aspect Ratio: 

• TBD

Expected Use:

This is a variant of the H009 Hero with Centered Text. This was designed specifically for use with the Newsroom Layout Page (L088, L089). This is a simple hero with only a centered title and no sub-title text. 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 five (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 one Collection to the Items list. The Layout Variant of the main Collection is set to H009B (this is not set in the Hero Placement section of the Page like most heroes. Your main 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. There is no sub-title body copy for this hero
• Pictures and Other Media - This includes a picture here which is the image shown in the hero. 
• Items - You will add a Collection of Collections that create the CTAs for the jump navigation links shown across the bottom of the hero. See below for instructions.
• Layout Variant - Set to H009B. 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.

Note that this Collection does not have the option to change Background colors because this is this a full bleed like H002/H003. It works as expected with the SE008B Search Bar. Refer to the SE008B CEG on how to set this up. 

Creating the 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" 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 H009B 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 H009B 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 five components enabled for jump navigation, only the first five will be recognized by the hyperlinks in the H009B 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.