Card with Support Styling

Introduction

The card component has a styling option specific for usage within the Support & Downloads section of Zebra.com 

A live example is here where support card styling is being used just underneath the main hero area. 


Specifications


Character Limit/Usage

To configure for the support style, you only need to add the title, title link and image. There is the ability to add a deep link (which is optional) whereby the component can append a query parameter. This tends to be used to deep link into a set of coveo search results. An example query parameter could look like this >  #sort=%40title%20ascending&f:category=[Mobile%20Computers]

It is important to note that cards should always be in a Card Container component. For more information about the card container, go here

Image Requirements

Image requirements are as follows: 1:1 or 16:9,  when used with icons, it is recommended using a 1:1 aspect ratio or when used with graphics or logos, it is acceptable to use wider images (16:9) but the height may be restricted - Hi res: 3600x3600, Mid res: 2400x2400, Low res: 800x800, Hi res: 3600x2025, low res:  1600x900.

Video Requirements

This component does not have any video requirements.


SEO Guidance

The title defaults to H5 and we do not recommend changing this.

If there is card container title present, we recommend setting the card container title to be a heading tag level higher than the heading tag used for the individual titles. For example, the card container title can be set as H2. The individual titles within the cards can be set as H3.

For any images used in this component, we recommend adding an alt image text that describes the image.


Use Cases and Style Variations

Typical example of how a support card style can be utilized. 


Need Help?

If you need help with a specific use case for the software applications component or need guidance with appropriate configuration, please contact Pavel Sebela.