Call to Action

The Call to Action component provides the user an option to perform a task within the page. In the body of every page, at least one CTA for a user to take is required except for information only pages such as Terms & Conditions.

Styles & Usage

Primary Button

  • Usage: Denotes the most important action for the user to take
    • The number of Primary Buttons on a page must be limited to maintain a priority of desired actions for the user to take

Internal Secondary Button

  • Usage: Highlights alternative actions for users if the primary action is not sought after
    • Use when linking to a page hosted on Zebra.com or within the same experience

External Secondary Button

  • Usage: Highlights alternative actions for users if the primary action is not sought after
    • Use when linking to a page that is outside of the current experience or a downloadable asset
    • These links should be opened in a new window (see Authoring section below)
These links should be opened in a new window (see Authoring section below)
These links should be opened in a new window (see Authoring section below)

View More Button - DO NOT USE

  • Usage: Indicates additional content is available on the page, but is hidden
    • Used only when developing components where displaying all of the content should be abbreviated to conserve page space or some form of pagination needed


Use Cases

  • Thumbnail Grid Drawer
  • Dynamic Video List

Download Link - DO NOT USE

  • Usage: Reserved for links that are downloadable assets, not HTML pages

External Link

  • Usage: Indicates the link will direct to a page that is outside of the current experience or a downloadable asset
    • These links should be opened in a new window (see Authoring section below)

Yellow Circle Link

  • Usage: Indicates a link related to product servicing on Support & Downloads Detail pages


Use Cases

Primary Dropdown

  • Usage: When there is more than one option related to the primary action on the page

Secondary Dropdown

  • Usage: When there is more than one option related to a secondary action on the page


Use Cases

Link Dropdown

  • Usage: When there is more than one option for an action

Transparent Button

  • Usage: Can be used in the place of a Primary or Secondary CTA on a colored background if the color does not allow for enough contrast / readability
    • Do not use on Extra Light Gray, Light Gray, or White backgrounds

Text Link

  • Usage: General link style used when directing to supplemental information that is not the primary or secondary action to be taken OR if 4 or more links need to be displayed in a single area


Use Cases

Global Configurations

  • Usage: Calls to action that require the same URL across an entire Zebra.com country site

Rich Text Editor Link

  • Usage: Only use as an inline link
    • Authored in the Rich Text Editor Component

Lorem ipsum dolor sit amet, consectetuer link adipiscing elit. Aenean commodo ligula eget dolor.

Authoring, Requirements and Specifications

CTA Global Config

  • Usage: See above
  • Configuration Settings: Controlled by designated members of the Web Team
    • Any other CTA authoring field will override the configuration
    • Typically, only the CTA Style should be selected when using a Global Configuration; the Link field should always be blank


CTA Style

  • Usage: See above descriptions


Button Text

  • Usage: CTA label / text
    • Use verbs and descriptive words so users understand what the action does 
  • Case: Title
  • Character Count (recommended max.): 25 including spaces
  • Translatable Field: Yes    


Link

  • Usage: Path the user is directed when clicking the CTA
  • Translatable Field: Yes   
  • Leave blank if using the Global Config


Open in New Window

  • Usage: The link will open in a new tab if selected


Horizontal Alignment

  • Usage: Determines the alignment of the CTA within the column