Deal Card - Usage

Basic Guidelines

The Deal Card offers lots of optional elements that can be displayed as required. They are not intended to be shown all at once, but rather to highlight the particular attribute that makes the product a special deal.

Behaviour

The Deal Card itself is not interactive. Only the thumbnails and the Button within are clickable.

Content Guidance

Bestseller

Call out the most popular product or deal.

• Don't change the text
• There should be only one bestseller per product category

Offer Tag

Show if the offer is related to an event or promotion.

• Show the name of the event or offer
• Max. of 3 words to avoid truncation
• Max. of 15 characters
• Sentence case — capitalise only the first words and any proper nouns

Price

Display the (discounted) price. Prices are critical information, and consistency across the website is essential. The price component follows a specific structure to ensure screen readers find it easy to interpret. Changing the text will affect this and might leave the prices incomprehensible.

• Don't change or add any additional text into Prefix or Suffix
• Don't change the format of the Suffix
• Use the disclaimer only to provide further clarification on terms and conditions

Savings

Show difference between list price and discounted price.

• Add the saving amount as a number

Deal info — No upfront fees

Call out if product does not have any upfront fees.

• Don't change the text

Deal info — Price deal

Call out if the the price represents a special deal.

• Don't change the text
• There can only be one deal per product category
• Hierarchy as follows:
  1) Lowest ever price,
  2) Best value,
  3) Great value

RTB

Communicate a key feature, benefit or RTB.

• Only use it if it's helping the user decide
• Text is limited to one line (ca. 26 characters)
• Don't add another RTB, there can only be one
• Don't change the icon

Special offer

To show a free gift, an offer on a different product as part of this deal, or an element that is automatically included in the purchase.

• Not to be used for marketing messages, product benefits or configurations
• Stick to two lines of text (ca. 48 characters)
• Don't change the icon

Validity period

To show how long the offer is available for.

• To be used on limited time offers
• Define the end date in annotations
• Don't change the icon
• Don't change the countdown format

Alignment

Deal Cards are stacked vertically on small viewports, aligned to the grid system. We recommend a 32px gap between Cards.

In a 12-column grid layout, Deal Cards can sit side-by-side, centre-aligned within the grid. The example below is downscaled proportionally for illustration purposes.

Please note: When the amount of content differs between cards placed side-by-side, the height of the cards is determined by the tallest card in the pair or group. Validity period, Button and Legal will always sit at the bottom of the card, with the necessary white space above.

These settings are automatically built into the React component, but have to be added manually in Figma.

• All Deals Cards in a single row need to be placed in an Auto Layout
• Enter all the content into the cards to see which is the tallest
• For the remaining shorter card(s), the following layers must have their height set to “fill” —
  - Deal Card
  - Content Main

Colour Usage

Do not change any colours on the Deal Card.

Image Sizing

The image aspect ratio cannot be changed. This is to make sure the Deal Cards look consistent and their content aligns when stacked horizontally.

Notes on Accessibility

Heading levels

The heading level of the Product title is configurable, but set up as an <h3> by default. This means, if users are navigating the page by headings, the product category is skipped. This is not an issue, since Deal Cards are predominately used on the Deals page, which is already structured into product categories using <h2> headings.

Alt text

Make sure to include appropriate alt text for the main image and the thumbnails in your handover.

Reading order for screen readers