Go to Content
Design System
Playroom Storybook
#ClimateEmergency

Promotion Type Attached to Product

The Product Attached Promotion is intended to be used to promote a function or feature related to a product the user already has. The main action of the product card (typically navigating to this product) will remain unchanged. The colourful area of the promotion acts as tappable area for the promoted action, whereby the “close X” remains reserved for hiding the promotion. The close option will always be available to the user.

  1. Promotion Action Area
  2. Close Action
Example - Attached to Product
Open in Figma

Text

Title

The title of the Promotion Attached to Product is optional and can be used when needed. Typically this is the case for a short call to action if there is a longer explanation text below.

The length of the title should be limited to 30 characters to ensure it is not longer than one line on most modern phones, and not longer than two lines on smaller devices. Titles longer than 30 characters should be avoided.

Example - Attached to Product / Title
Open in Figma
Do
  • Supply short and actionable titles
  • Supply no title
Don’t
  • Don’t supply longer titles than 30 characters

Body Text

The body text of a Promotion Attached to Product can be used in conjunction with a title or as standalone text. If the body text is used on it’s own the wording should describe an action the user can take.

The body text of Promotion Cards should be limited to 70 characters to ensure it is not longer than two lines on most modern phones, and not longer than three lines on smaller devices. Text longer than 70 characters should be avoided. Also avoid set up of promotion without the body text.

Example - Attached to Product / Body Text
Open in Figma
Do
  • Supply concise body text in simple language
  • Body text should describe an action when used as standalone
Don’t
  • Don’t supply longer body text than 70 characters
  • Don’t repeat what is already in the title

Colour

The background colour of a promotion attached to product is always displayed as the colour of the product where the promotion is attached to. The colour can not be changed via the Promotion API. The text colour is always white.