Jump To Navigation
Synopsis: The Jump-To Navigation component is a component that allows authors to create anchor links that jump the user down to pre-defined areas. This component works in combination with the Anchor Tag component. There is a small version that has only a color background, and medium and large versions that have an image background.
Content Fields:
Background Image, Label, Link Labels, Link Paths
Options:
Size: Small, Medium, Large
Background Color (Small only): Fiserv Color Palette
Background Position: Left, Center, Right
Theme: Light, Dark
Blur: On, Off
Jump To links Position: Left, Center, Right
Link Target: Same, New
Note: If we select the Medium and Large in Size option then Background image field will display, for Small Background color will display.
Recommended Image Specifications: For full width, the recommended image should have a width of 2400.
Usage: All pages.
Note: This should be used as an example only. There will be additional requirements related to each individual component usage and page design, such as font treatments, padding and margin requirements, ADA compliance etc., so please use the below examples for reference only to demonstrate core function.
Variation 1
Ingredients: 1 Container, 1 Jump to Navigation.
This use case involves an outside container set to full width. The jump to nav is of the dark theme (black text) and Small Size, Jump To links Position-Right.
The links here are configured to go to a section lower on the same page using an anchor tag.
Variation 2
Ingredients: 1 Container, 1 Jump to Navigation
This use case involves an outside container set to full width. The jump to nav is of the light theme (white text) and Medium Size, Jump To links Position-Left. Jump To Navigation will primarily be used full width, but this example shows it as contained.
The links here are configured to go to a section lower on the same page using an anchor tag.
Variation 3
Ingredients: 1 Container, 1 Jump to Navigation
This use case involves an outside container set to full width. The jump to nav is of the Dark theme, Large size and Jump To links Position - Center.
The links here are configured to go to a section lower on the same page using an anchor tag.
Variation 4
Ingredients: 1 Container, 1 Jump to Navigation
This use case involves an outside container set to full width. Jump to nav authored with background image, large size and Jump to links position - center.
The links here are configured to go to a section lower on the same page using an anchor tag.
Case studies section
Perspectives section
Resource section