Hero Banner Slanted

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 slanted style of the hero banner. 

We are not currently using this style on any pages on zebra.com.


Specifications

 

Character Limit/Usage

Text can be added in the following properties: headline, body copy, eyebrow, CTA.

  • Headline: 45 characters max
  • Body copy: 250 characters max
  • Eyebrow: 45 characters max
  • CTA: 35 characters max

Image Requirements

Image is required and must be uploaded to the DAM before it can be placed on the page.

  • Dimensions: 3600x2025 pixels
  • Aspect ratio: 16:9
  • File type: jpg

Settings for desktop and mobile images should be utilized to ensure there is an appropriate image for different screen sizes.

Video Requirements

Video can be used, but is not required. 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.

Styling

CTA only: Please be aware that 'grey border', 'no border' and 'support link' in the CTA configuration are only used on Support & Downloads pages.

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.
  • Desktop Image - Drag and drop images here or "Pick" from component itself. 
  • Mobile Image - Drag and drop images here or "Pick" from component itself. 
  • CTA - Add CTAs here (can add single one or multiple) and select style.

Below is a list of the configuration options:

  • Title
  • Title Size (H1, H2 etc)
  • Subtitle
  • Background/Theming
  • CTA (The CTA includes the various available styles).
    • To learn more about the CTA component, click here.

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 Cases and Style Variations

With Image and Video

Workflow Management Software

Optimize Operations


The power of AI, visibility, a new level of elegance to manufacturing combine to launch your business into an era of unparalleled productivity. Zebra Workflow Management Software solutions turn your business into a powerhouse of efficiency.

Image Only

Workflow Management Software

Optimize Operations


The power of AI, visibility, a new level of elegance to manufaturing combine to launch your business into an era of unparalleled productivity. Zebra Workflow Management Software solutions turn your business into a powerhouse of efficiency.

Long Headline

Workflow Management Software

Optimize Operations with Workflow Management


The power of AI, visibility, a new level of elegance to manufaturing combine to launch your business into an era of unparalleled productivity. Zebra Workflow Management Software solutions turn your business into a powerhouse of efficiency.

Short Headline

Workflow Management Software

Optimize


The power of AI, visibility, a new level of elegance to manufaturing combine to launch your business into an era of unparalleled productivity. Zebra Workflow Management Software solutions turn your business into a powerhouse of efficiency.

Long Body Copy

Workflow Management Software

Optimize Operations


The power of AI, visibility, a new level of elegance to manufacturing combine to launch your business into an era of unparalleled productivity. Zebra Workflow Management Software solutions turn your business into a powerhouse of efficiency.

Short Body Copy

Workflow Management Software

Optimize Operations


Zebra Workflow Management Software solutions turn your business into a powerhouse of efficiency.

No Body Copy

Workflow Management Software

Optimize Operations

Long Eyebrow

Zebra Workflow Management Software Solutions

Optimize Operations


The power of AI, visibility, a new level of elegance to manufaturing combine to launch your business into an era of unparalleled productivity. Zebra Workflow Management Software solutions turn your business into a powerhouse of efficiency.

No Eyebrow

Optimize Operations


The power of AI, visibility, a new level of elegance to manufaturing combine to launch your business into an era of unparalleled productivity. Zebra Workflow Management Software solutions turn your business into a powerhouse of efficiency.

No CTA

Workflow Management Software

Optimize Operations


The power of AI, visibility, a new level of elegance to manufaturing combine to launch your business into an era of unparalleled productivity. Zebra Workflow Management Software solutions turn your business into a powerhouse of efficiency.

CTA - Multiple

Workflow Management Software

Optimize Operations


The power of AI, visibility, a new level of elegance to manufaturing combine to launch your business into an era of unparalleled productivity. Zebra Workflow Management Software solutions turn your business into a powerhouse of efficiency.

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.