Get Started Component

Introduction

The Get Started navigation allows users to quickly find content on the Zebra website based on Zebra’s various industry-specific solutions when paired with the hero banner. This component is currently exclusively used on the home page of zebra.com

This component is a special element that overlays on top of the Hero Banner, and acts as a conditional navigation (based on the first selection, the second select options will change, and then the user will be redirected to a specific page).

The form should float down to the bottom of the page as the user scrolls, locking to the bottom left-hand corner of the screen in Desktop (full bottom of the screen in Mobile) until the user scrolls back up again to the banner.


Specifications


Character Limit/Usage

There isn’t a strict character limit for the Hero component. Text can be added in the following properties: title, subtitle, and eyebrow.

Component Tabs:

  • Properties - Adjust the header title, List Labels, and Sticky Bar text.
  • Navigation Items - Fill in to build the dropdown navigation out.

Image Requirements

Settings for desktop and mobile images can be utilized to ensure there is an appropriate image for different screen sizes. A hero banner without an image asset is not supported.

Video Requirements

Videos should be included from the DAM. Can be added to be looping video or modal video. Aspect ratio optional setting can be acessed through the video settings tab.

Styling

Please be aware that 'grey border', 'no border' and 'support link' in the CTA configuration are only used on Support Pages'. If unsure please contact us below. In addition, 'Support Alert - In Page' and 'Support Global Alert' are only to be used on support pages. 


SEO Guidance

As this is a Hero Banner component, it should be positioned at the top of your page. The title should use the H1 tag.  We do not recommend using the hero banner with any other heading tags. And we do not recommend using multiple hero banners in a single page. If unsure, please contact the web team. 

It is recommended to use a relevant keyword target in the title.

In addition, any image you use is recommended to have an alt text that describes the image within the context of the page. In the Hero Banner, the image alt text is pulled automatically from the description in the DAM record of the image. 

The CTA Label in the Get Started component should be short, concise and action-oriented.


Use Cases and Style Variations


Workflow Management Software

Empower every worker at the edge of your business


With innovative products and solutions from Zebra to sense, analyze and act in real-time

What are you looking for
What are you looking for

Placeholder to show navigation functionality

.

.

.

.

.

.

.

.

.

 

..

..

..

..

..

.

Need Help?

If you need help with a specific use case for the text jumbo component or need guidance with appropriate configuration, please contact the web team.