Hero with Jump Links and Optional Ambient Video Loop

Layout Variant: H002D

Content Type: Collection

Aspect Ratio: 

• Asset Size: 1920px x 1080px
• Asset Aspect Ratio: 16:9

Expected Use:

H002D is a variant of the H002 hero that allows for featuring an optional looped ambient video in the background and configuring jump link navigation driving users to key content sections lower on the page. Jump links scroll users down the page to the start of the associated page section or topic block.

H002D is intended for Software landing and other high-level marketing pages which benefit from both an elevated visual experience and the ability to convey direct pathing to key topics presented lower on the page. The background of the hero can be configured to display either a static image like other heroes or a brief ambient video clip that auto plays on a loop. Additionally, the hero can be configured to include breadcrumbs when appropriate and allow editors to author the H1 for the page, recommended descriptive intro text, up to 2 optional CTA buttons and up to 6 optional jump links.

Use for high-level product marketing pages, such as Software suite landing pages, prominent campaigns or other landing pages where background video content in the hero would add value to the user experience of the page’s introduction.

Alternate options for H002D are H002B, H002C, H002E. 

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 "Default" in the Hero Placement section on the page. Your Collection should contain the following:

• Teaser Title - The main headline shown on the upper left side of the image below the breadcrumbs. Two lines max is recommended.  
• Teaser Header - This is currently not used. 
• Teaser Text - This is the optional body copy shown below the Title. 
• Add one to two CTAs - The optional CTAs drive users to corresponding child and supporting pages, such as Software Product pages or demo sign up forms, as needed. Maximum of two (2) CTAs can be added.   
  • Call-to-Action-Button - This is the green CTA centered under the Title and body copy.
  • You can set max of two CTAs for H002D which are displayed below the body copy. Maximum characters is 50. 
  • Set to "Linked-Call-to-Action" and add a Page for the CTA destination (other teasable such as External Links, Video, or Document Download). The CTA Label comes from the Linked Item. 
• Pictures and Other Media - This may include a static image or a video loop content type displayed as background on the entire hero.
  • For the picture, the recommended file size is <300kb and asset size of 2880px x 1620px with aspect ratio of 16:9.
  • For the Video Loop, this is displayed at the top in the normal hero spot with an H1 title and optional descriptive body copy.  
    • For video background, an autoplay/loop/mute API is used that only works on Brightcove Videos. It is a must for content authors to only include a Brightcove video for the autoplay, mute and loop feature to work. 
    • The video recommended duration is 15 -30 sec while the asset size should be 1920px x 1080px with an aspect ratio of 16:9.
    • However, there is no need to add a video, if the intent is to just display a solid background color on the Hero
• Items - You will add Collections as Items that build out the hero jump links. 
  • Jump links: A Collection of collections was created to contain the jump links and the collections were those added to the Item section of the page.
  • The Jump Link Collection creates the CTAs for the jump navigation links shown across the bottom of the H002D Hero. 
  • The Item components intended to have jump links must have the Jump Links enabled on the Content tab with or without the optional Alternate Title. If the Alternate Title is left blank, the Jump link label will default to display the collection's Teaser Title. 
  • Max character length for the Jump link label is 50. Only six (6) jump links can be displayed on H002D. 
• Layout Variant - Set to H002D. 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. This will only function correctly if the Layout Variant is set in the main H002D Collection.
• Teaser Header and Teaser CTA Label are not used. The CTAs for the jump links come from the H002B Jump links collection you will add on the Items List.

• On the Local Settings under the System Tab of the H002D Collection, the following properties must be listed to enable/disable functions:
  • "showBreadcrumbs" - This is a Boolean property that enables/disables the display of Breadcrumbs on the top most left side just above the Teaser Title. Breadcrumbs are a navigational aid that displays the page you are currently on and its relation to the hierarchy of higher level parent pages above the current page.
  • "callToActionState" - This is an Integer property that defines the types of CTAs displayed. For H002D, this must be set to "4".  
  • "callToActionDisabled" - This allows users to disable display of CTAs on the Hero. 
  • The following Local Settings are auto created when a Background Color is selected:
    • "backgroundToggle" - This is the shortcut to enable/disable the "Legacy (Grey)" background color. The property is auto created when the "Legacy (Grey) Background Color is selected on the Content Tab. 
    • "bgColorState" - This property setting is auto created when any of the Primary Background Color, Secondary Background Color or Accent Background Color is selected on the Content Tab. This property displays the currently selected Background Color from the said three (3) colors. 
• The optional Background Color modification feature on the Content tab can also be used as H002D Hero Background. Users can set it up under the Background Color on the Content Tab. However, to display the video loop, ensure that the background color is set to Default.

Item - 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 H002D 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: To properly display the H002D, the Layout Variant H002D must be defined in the Collection while the Hero Placement on the Page must be set to "Default". 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 H002D 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 six components enabled for jump navigation, only the first six will be recognized by the hyperlinks in the H002D hero. Further, You also have the option to add an "Alternate Title" as preferred. Adding an "Alternate Title" overrides the use of the Teaser Title as Jump Link label.