CTA

Introduction

The CTA component is used to link to other pages (on Zebra.com or other websites) or assets (PDF or video). This includes Digital Buttons that are referenced in Zebra's Brand Guidelines document.

Need Help?

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

Information

Specifications


Character Limit/Usage: 35 characters max. Sentence case.

Image Requirements: N/A

Video Requirements: N/A

Authoring Instructions

The component can be authored to include only 1 CTA or multiple depending on the application. We recommend no more than 3 CTAs on a page.

If linking to an asset or a page NOT on zebra.com, the link should always open in a new tab.

SEO Guidance

CTA buttons should use action-oriented verbs (e.g., “Download Now,”  “Sign Up”, etc).  CTA text is also a good opportunity to concisely communicate the value or benefit that you are providing (e.g., “Get Your Free Guide”).

CTA text should be concise and to the point. Try to stay two words or under, and no more than four.

Styling Options and Instructions

Using a range of button and link styles allows great flexibility for creating engagement with site visitors. Below are the options available for CTA Styling (different styles impact the way the actual button looks). All examples of the styling are shown below in use cases. 

  • Primary: Green 
  • Primary: Black
  • Secondary: White
  • Tertiary: Link Blue (no background color)
  • Link White -   Is visible only when used inside a Background Container and recommend to use with the black background container
  • Grey Border (Only used for support pages, do not use for marketing pages)
  • No Border  (Only used for support pages, do not use for marketing pages)
  • Support Link (Only used for support pages, do not use for marketing pages)

Below are the options for the Icon (the styling of the arrow).

  • Default (Arrow Right) - Most commonly used option across the site
  • Arrow Down - Used to indicate an asset that is to be downloaded
  • Arrow Left - Used to indicate that you can click back to previous page (used on product page, example here ('see all mobile computers' CTA underneath introduction copy) but this is rarely used elsewhere on the site
  • None

Text and CTA Banner with CTA

A Zebra fixed industrial scanner is placed overhead at a packing bench and helps a warehouse worker pack faster and more accurately by automatically reading barcodes and confirming via integrated status LEDs, sending the information straight to the Warehouse Management System.
This is the eyebrow of the Text 2 Image Column

This is the title of the Text 2 Image Column

This is the body copy of the Text 2 Image Column.