Overview

Purpose

Deal Cards communicate products by directing and linking users to other pages.

Anatomy

The Deal Card component can be broken down into the following elements -

1. Highlight component (optional)
   Highlights are used to call attention to specific cards. The Highlight component can have its colours adjusted, but not its placement or sizing, these must remain fixed as per the default settings.

2. Card component
   Deal Cards use a Card to provide a container.

3. Deal info
   Dedicated area for headings, sub-headings, and headline price.

4. Placeholder component
   A non-optional image.

5. Additional details
   Often used for Glass promotion, extra details can be added here below the image.

6. Buttons
   Section for one or two CTAs that trigger actions.

Deal Info Anatomy

The deal info area can be broken down into the following elements -

1. Product name
   Dedicated area for key messaging.

2. Product details (optional)
   Dedicated area with a brief description of the product(s) and/or deal details.

3. Headline Price component (optional)
   Deal Cards use the Headline Pricing component to indicate the price of the deal.

4. Legal (optional)
   Gives details of the legal information associated with the deal. ‘Legal copy’ must be used whenever a price is displayed.

Additional Details Anatomy

The additional details can be broken down into the following elements -

1. Availability (optional)
   A section to show availability details.

2. Additional details (optional)
   Area for additional details relating to the deal.

3. Legal (optional)
   Gives details of the legal information associated with the deal.

Variants & States

• Card type: Default, Image Top
• Buttons: One, Two