Component Active

H009B Hero w/ Centered Copy and Jump Links

As an alternative to the H009, the H009B hero component can be used for authoring a minimal, centered-aligned hero with in-page navigation jump links that can be configured to include an optional scoped search bar, for utility- and support-related pages.

Component Detail

This hero component is available for use whenever a hero with minimal content (title only) and is needed, and includes up to 5–6 in-page jump links to help users quickly navigation to content sections of their interest.

The H009B can also be paired with a search bar, such as SE008 or SE009 when search and filtering functionality is required.

Interactions

On click, each jump link will scroll the page to location of the associated content section.

**Note: Similar to the H002B, jump links do not become “sticky” to the top of the page on scroll and will not maintain visibility when the hero is not within view of the viewport.

Specifications

Max Characters

Headline: 50
Jump Link Text: 25

Image Asset Dimensions

Asset Size: 2880px x 1620px
Asset Aspect Ratio: 16:9
Recommended File Weight: <300kb

Display Sizes:

Width: 100% viewport width
Height: 224px

Image Aspect Ratios

Desktop: 4:1
Tablet: 5:2
Mobile: 4:3

Usage Guidelines

When To Use:

Use only on utility- or support-related pages (e.g., Newsroom, Newsroom Search Results pages) for enabling in-page content navigation from the hero, or on pages which require a scoped search component (i.e., SE008, SE009) to allow users to search for a specific type of content.

When To Avoid:

Avoid using on pages that are not utility- or support-related. Specifically avoid using for the primary reason of achieving centered text within a hero component with jump navigation.

Alternative Options:

H002B (for alternative jump-link hero), H009 (for alternative hero with scoped search).

Share Your Feedback