Hero Banner Video

Introduction

The Hero Banner is used at the top of a page to introduce the topic and provide a visual representation of the content. This page covers the video style of the hero banner. 

This component was specifically created for the zebra.com homepage and should not be used anywhere else.


Specifications

 

Character Limit/Usage

Text can be added in the following properties: headline and body copy.

  • Headline: 50 characters max
  • Body copy: 100 characters max

Image Requirements

This component does not support images.

Video Requirements

Video is required for this component. The file must be uploaded to the DAM before it can be placed on the page. It can be defined as a looping video or modal video. The aspect ratio optional setting can be accessed through the video settings tab.

Authoring Instructions

Hero Banner different variations can be set through style brush icon.

Component Tabs:

  • Properties - Add Title, adjust H-style and add body copy, eyebrow and background color.
  • Video Settings - Add video from the DAM here. Can be added to be looping video or modal video. Aspect ratio also optional setting here.

Below is a list of the configuration options:

  • Title
  • Title Size (H1 only)
  • Subtitle

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. 


Use Case

Empower every worker at the edge of your business


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

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.