Two Sided Image Card

Introduction

Two Sided Image is a style option for the Card component. When a user hovers over the card, the title, content type, text and CTA reveal themselves. The Card component is used inside of the Card Container component (learn more about the Card Container component here).

See a live example here.


Specifications

Character Limit/Usage

Title: 50 Characters Recommended (Note, after 25 characters, the title will go into the second line), Title Case.

Description: 150 - 200 Characters Recommended.

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 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

Video Requirements

This component does not support video.

Styling

This page is about the Two Sided Image style of the Card component.

Authoring Instructions

  • Using the card container, authors manage the number of columns (how many cards) to display and can add a CTA (examples are shown below).
  • On the card itself, authors can drag/drop images and add Titles and CTAs to build out the promo card itself.

SEO Guidance

The titles of this component can be in a heading tag such as H2, H3, H4, and so on - depending on the structure of the page. The text titles should be heading level lower than the title of the component. For example, if you have a title set as an H2, we would recommend that the text titles be H3 or in text format (no heading tag). We do not recommend using an H1 in titles or text titles of this component.

All images used in this component should have image alt text that describes the image within the context of the page.


Use Cases and Style Variations

Two Sided Image Card within a Card Container Component in a 33/33/33 Column Control Configuration (which enables three cards to display in a row).

Manufacturing photography, Pharmaceutical tile
Pharmaceutical
Pharmaceutical

Zebra's hardware, software, supplies and services deliver pharmaceutical track and trace solutions designed to help overcome supply chain challenges and drive productivity.

Food Safety
Food Safety

Zebra’s Food Safety Supply Chain Solutions helps you transform your food supply chain from farm to fork for safety, traceability and transparency.

Man at an automotive warehouse
Automotive Manufacturing
Automotive Manufacturing

Zebra provides the hardware, software, supplies and services to deliver automotive manufacturing solutions purpose built to achieve true enterprise asset intelligence, modernize operations and drive productivity.

Two Sided Image Card within a Card Container Component in a 33/33/33 Column Control Configuration. This has a centered title (you can add either a left, center or right aligned title). 

View Manufacturing Key Segments

Manufacturing photography, Pharmaceutical tile
Pharmaceutical
Pharmaceutical

Zebra's hardware, software, supplies and services deliver pharmaceutical track and trace solutions designed to help overcome supply chain challenges and drive productivity.

Food Safety
Food Safety

Zebra’s Food Safety Supply Chain Solutions helps you transform your food supply chain from farm to fork for safety, traceability and transparency.

Man at an automotive warehouse
Automotive Manufacturing
Automotive Manufacturing

Zebra provides the hardware, software, supplies and services to deliver automotive manufacturing solutions purpose built to achieve true enterprise asset intelligence, modernize operations and drive productivity.

Two Sided Image Card within a Card Container Component in a 33/33/33 Column Control Configuration. This has a centered title (you can add either a left, center or right aligned title). This example also includes a configured CTA which can be added if needed. 

View Manufacturing Key Segments

Manufacturing photography, Pharmaceutical tile
Pharmaceutical
Pharmaceutical

Zebra's hardware, software, supplies and services deliver pharmaceutical track and trace solutions designed to help overcome supply chain challenges and drive productivity.

Food Safety
Food Safety

Zebra’s Food Safety Supply Chain Solutions helps you transform your food supply chain from farm to fork for safety, traceability and transparency.

Man at an automotive warehouse
Automotive Manufacturing
Automotive Manufacturing

Zebra provides the hardware, software, supplies and services to deliver automotive manufacturing solutions purpose built to achieve true enterprise asset intelligence, modernize operations and drive productivity.

Two Sided Image Card within a Card Container Component (light grey background configuration) in a 33/33/33 Column Control Configuration. This has a centered title (you can add either a left, center or right aligned title). 

View Manufacturing Key Segments

Manufacturing photography, Pharmaceutical tile
Pharmaceutical
Pharmaceutical

Zebra's hardware, software, supplies and services deliver pharmaceutical track and trace solutions designed to help overcome supply chain challenges and drive productivity.

Food Safety
Food Safety

Zebra’s Food Safety Supply Chain Solutions helps you transform your food supply chain from farm to fork for safety, traceability and transparency.

Man at an automotive warehouse
Automotive Manufacturing
Automotive Manufacturing

Zebra provides the hardware, software, supplies and services to deliver automotive manufacturing solutions purpose built to achieve true enterprise asset intelligence, modernize operations and drive productivity.

Two Sided Image Card within a Card Container Component (dark blue background configuration) in a 33/33/33 Column Control Configuration.

Manufacturing photography, Pharmaceutical tile
Pharmaceutical
Pharmaceutical

Zebra's hardware, software, supplies and services deliver pharmaceutical track and trace solutions designed to help overcome supply chain challenges and drive productivity.

Food Safety
Food Safety

Zebra’s Food Safety Supply Chain Solutions helps you transform your food supply chain from farm to fork for safety, traceability and transparency.

Man at an automotive warehouse
Automotive Manufacturing
Automotive Manufacturing

Zebra provides the hardware, software, supplies and services to deliver automotive manufacturing solutions purpose built to achieve true enterprise asset intelligence, modernize operations and drive productivity.

Two Sided Image Card within a Card Container Component in a 25/25/25/25 Column Control Configuration which enables four cards to display in a row.

Customer at mobile checkout
FAQ: What is Mobile POS?
FAQ: What is Mobile POS?

MPOS stands for Mobile Point of Sale and consists of a handheld mobile computer that can connect to your wireless LAN, a standalone or snap-on payment transaction reader, and if on-the-spot printing is required, a compact mobile Bluetooth-enabled printer that can be easily worn on a belt.

Zebra mobile computer in someone's hands
Schnuck Markets Success Story
Schnuck Markets Success Story

Schnuck Markets selects Zebra’s point-of-sale technology, mobile computers and printers to increase store efficiency, speed up checkout lines, improve price labeling and streamline inventory management.

manufacturing-connected-factory-photography-website-3600x2700
The Rise of the Connected Factory
The Rise of the Connected Factory

Explore the transformation of manufacturing with our comprehensive study on connected factories. Discover key trends and insights from C-suite, IT, and OT leaders and the impact of digital strategies on efficiency, agility, and scalability. Learn how advances in technology and automation are shaping a new era of manufacturing excellence. 

Worker on a manufacturing line
Integrated Material Handling and Next-Generation Logistics
Integrated Material Handling and Next-Generation Logistics

Elevate manufacturing excellence with five modern material handling strategies that streamline processes, reduce costs and optimize resources.

Two Sided Image Card within a Card Container Component in a 25/25/25/25 Column Control Configuration which eight cards (four on top and four underneath)

Customer at mobile checkout
FAQ: What is Mobile POS?
FAQ: What is Mobile POS?

MPOS stands for Mobile Point of Sale and consists of a handheld mobile computer that can connect to your wireless LAN, a standalone or snap-on payment transaction reader, and if on-the-spot printing is required, a compact mobile Bluetooth-enabled printer that can be easily worn on a belt.

Worker on a manufacturing line
Integrated Material Handling and Next-Generation Logistics
Integrated Material Handling and Next-Generation Logistics

Elevate manufacturing excellence with five modern material handling strategies that streamline processes, reduce costs and optimize resources.

Zebra mobile computer in someone's hands
Schnuck Markets Success Story
Schnuck Markets Success Story

Schnuck Markets selects Zebra’s point-of-sale technology, mobile computers and printers to increase store efficiency, speed up checkout lines, improve price labeling and streamline inventory management.

manufacturing-connected-factory-photography-website-3600x2700
The Rise of the Connected Factory
The Rise of the Connected Factory

Explore the transformation of manufacturing with our comprehensive study on connected factories. Discover key trends and insights from C-suite, IT, and OT leaders and the impact of digital strategies on efficiency, agility, and scalability. Learn how advances in technology and automation are shaping a new era of manufacturing excellence. 

manufacturing-connected-factory-photography-website-3600x2700
The Rise of the Connected Factory
The Rise of the Connected Factory

Explore the transformation of manufacturing with our comprehensive study on connected factories. Discover key trends and insights from C-suite, IT, and OT leaders and the impact of digital strategies on efficiency, agility, and scalability. Learn how advances in technology and automation are shaping a new era of manufacturing excellence. 

Zebra mobile computer in someone's hands
Schnuck Markets Success Story
Schnuck Markets Success Story

Schnuck Markets selects Zebra’s point-of-sale technology, mobile computers and printers to increase store efficiency, speed up checkout lines, improve price labeling and streamline inventory management.

Worker on a manufacturing line
Integrated Material Handling and Next-Generation Logistics
Integrated Material Handling and Next-Generation Logistics

Elevate manufacturing excellence with five modern material handling strategies that streamline processes, reduce costs and optimize resources.

Customer at mobile checkout
FAQ: What is Mobile POS?
FAQ: What is Mobile POS?

MPOS stands for Mobile Point of Sale and consists of a handheld mobile computer that can connect to your wireless LAN, a standalone or snap-on payment transaction reader, and if on-the-spot printing is required, a compact mobile Bluetooth-enabled printer that can be easily worn on a belt.


Need Help?

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