Standalone Promotion Card

It is a commonly understood design pattern in mobile apps, that cards are interactive components, whereby a user can tap anywhere on the card to perform the action indicated by the card. This principle also applies for the promotion card component, as the entire card can be tapped to perform the main action. Only the area of the “close X” will hide the promotion card. Every promotion card we show to our users must be closable.

Main Promo Card Action
Close Action

Text on Promotion Cards

Title

The title of promotion cards should be written in a short and actionable way. The length of the title is recommended to be 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 50 characters should be avoided. The Promotion Card Title is mandatory.

Supply short and actionable titles
Aim for maximum 30 characters for titles

Don’t

Don’t supply longer titles than 50 characters
Don’t shout! i.e. avoid exclamation marks.

Body Text

The body text of Promotion Cards is recommended to be 120 characters to ensure it is not longer than three lines on most modern phones, and not longer than four lines on smaller devices. Text longer than 120 characters should be avoided. The Promotion Card Body Text is also mandatory.

Supply concise body text in simple language

Don’t

Don’t supply longer body text than 120 characters
Don’t repeat what is already in the title
Do not use bold or <b>…</b> tags

Use of Emoji

The Promo Card Icon is not available for use anymore. Instead emoji can be used as part of the Title or Body Text to draw attention and help communicate the message in a more visual way. The use of emoji is optional.

Use emoji to help convey your message
Be inclusive in terms of gender, skin colour etc.

Don’t

Don’t use more than one emoji
Don’t use generic smileys
Don’t use emoji in the body text

Campaign Image

If the promotion card is related to an ongoing campaign on social media, TV, print etc. a campaign image can be supplied as a 64x64 dp png image. To support different screen densities, every image must be also supplied in @2x (128x128 px) and @3x (192x192 px) resolutions. The use of a Campaign Image is optional. Consider background colours and dark mode when choosing the image to ensure the overall composition works. When an image is used, the recommended text length is 30 characters for the title and 90 characters for the text, as the available text space shrinks in this case.

Use a photographic or rich image related to the campaign
Aim for maximum 30 characters for titles

Don’t

Don’t supply longer body text than 90 characters
Don’t use the campaign image to display a product icon
Don’t use images with transparency
Don’t use low resolution or bad quality images

Custom Background

A Promotion card can be customised by using a colourful background. The George colours as listed here are available to choose from. If a custom background is applied, all text and the close icon will automatically be switched to be white. The use of a custom background is optional.

Loading demo…

The use of emoji and campaign images is still available in combination with a custom background.

Example - Promotion Card / Custom Background

Dark Mode

The default promo card in dark mode will automatically get a dark background and light text. If a custom background is used, the colour will be darkened automatically.

Examples

Examples of all possible promo card configurations: