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 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 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 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 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.
The use of emoji and campaign images is still available in combination with a 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:
