Product Card - Overview

Purpose

Product Card is used to display product information and present potential product-based actions. It always has at least one action associated with it, and the option to show additional offers and pricing choices.

Please note: Product Cards and Deal Cards have different uses. Deal Cards communicate products and direct users to other pages to find out more details. They are high-level, whereas Product Cards are about making final decisions and actions.

Anatomy

Product Card can be broken down into the following elements:

Card component
Product Cards use a Card to provide a container.
Highlight component (optional)
Highlights are used to call attention to specific Product Cards. The Highlight component can have it's colours adjusted, but not it's placement or sizing, these must remain fixed as per the default settings.
Image Placeholder component (optional)
An optional image.
Product Details
Dedicated area for headings, descriptions, lists, and links.
Pricing information
Dedicated area for headings, descriptions, lists, and links.
Button component
Button for completing an action within the Product Card.
Offer details (optional)
Dedicated area for information on linked offers.
Legal information (optional)
Dedicated area for legal information.

Product Details Anatomy

The product details area can be broken down into the following elements:

Product logo (optional)
Option to include a related product logo if one is available.
Title of product
Dedicated area for product title.
Linked details (optional)
Dedicated area for short, additional links or linked details using the Text Link component.
Icon List component
Area to list out RTBs or other information in a list format.
Optional offer (optional)
Additional text to link out to additional offers or information using the Text Link component.

Offer Details Anatomy

The offer details area can be broken down into the following elements:

Offer details (optional)
A linkable piece of text to take the user away to a linked offer or provide information on a linked offer.
Offer product logo (optional)
Option to include a related offer product logo if one is available.
Title of product offer
Dedicated area for offer product title.
Offer linked details (optional)
Dedicated area for additional links or linked details relating to the offer or product using the Text Link component.
Offer pricing information
Price component to indicate the price of a linked product offer.
Button component
Button component for completing an action within the offer section of the Product Card.