Asymmetrical Hero Banner

Introduction

The Hero Banner is used at the top of a page to introduce the topic and provide a visual representation of the content. The Asymetrical Hero Banner component showcases information in a large section on a page.  Generally will be used at the top of a page, but can be found in other instances. 

See a live example here.


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: 3600x2700 pixels
  • Aspect ratio: 4:3
  • 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 - Authors can add Title, adjust Heading-style and add body copy, eyebrow and select background color.
  • Video Settings - [Optional] Authors can 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. Image should be in 4x3 format. 
  • 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:

  • Eyebrow
  • Title
  • Title Size (H1, H2 etc)- Note: Text style will always be the same regardless of Heading selected
  • Subtitle
  • Background/Theming
  • CTA (The CTA includes the various available styles).
    • To learn more about the CTA component, click here.

SEO Guidance

Please ensure that if you are using multiple components with text and/or titles on a page, only one of them contains an H1 title. According to SEO best practices, each page should have only one H1 tag. 

As this is a Hero Banner component, it should gernerally 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. We also do not recommend using multiple hero banners in a single page. 

It is recommended to use the main keyword target in the title. Other target keywords should also be present in the description/body copy.

The CTA should be short, concise, and action-oriented. 

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


Retail Use Case

Loss Prevention and Asset Protection


Unlock Real-Time Visibility and Asset Protection with Zebra's Retail Loss Prevention Solutions


Image Only

Retail Use Case

Loss Prevention and Asset Protection


Unlock Real-Time Visibility and Asset Protection with Zebra's Retail Loss Prevention Solutions

Long Headline

Retail Use Case

Loss Prevention and Asset Protection Solutions


Unlock Real-Time Visibility and Asset Protection with Zebra's Retail Loss Prevention Solutions

Short Headline

Retail Use Case

Loss Prevention


Unlock Real-Time Visibility and Asset Protection with Zebra's Retail Loss Prevention Solutions

Long Body Copy

Retail Use Case

Loss Prevention and Asset Protection


Zebra Prescriptive Analytics™ implements fast, without disruption and enables you to overcome the time, labor and management challenges of stopping profit leaks, optimizing inventories and improving workflows at scale.

Short Body Copy

Retail Use Case

Loss Prevention and Asset Protection


Zebra's Retail Loss Prevention Solutions

No Body Copy

Retail Use Case

Loss Prevention and Asset Protection

Long Eyebrow

Zebra Retail Solutions Use Case

Loss Prevention and Asset Protection


Zebra Prescriptive Analytics™ implements fast, without disruption and enables you to overcome the time, labor and management challenges of stopping profit leaks, optimizing inventories and improving workflows at scale.

No Eyebrow

Loss Prevention and Asset Protection


Zebra Prescriptive Analytics™ implements fast, without disruption and enables you to overcome the time, labor and management challenges of stopping profit leaks, optimizing inventories and improving workflows at scale.

No CTA

Loss Prevention and Asset Protection


Zebra Prescriptive Analytics™ implements fast, without disruption and enables you to overcome the time, labor and management challenges of stopping profit leaks, optimizing inventories and improving workflows at scale.

CTA - Multiple

Loss Prevention and Asset Protection


Zebra Prescriptive Analytics™ implements fast, without disruption and enables you to overcome the time, labor and management challenges of stopping profit leaks, optimizing inventories and improving workflows at scale.


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.