OverviewPromoCard Beta
OverviewPromoCard serves for displaying promotions in overview, along the regular OverviewCards. It supports both vertical (grid view) and horizontal (list view) orientations.
Actions
Even though the footer contains a visible Button, the entire card can be tapped to perform the default action. Only the close button hides the card instead. The footer can optionally also include an OverviewMenu dropdown with further options.
Rules For Designers
- Every OverviewPromoCard must be closeable
- Clicking the card should perform the same action as clicking the button in the footer
Rules For Developers
- For accessibility reasons the default action will be wrapped around the title of the card, which will itself be wrapped by a heading. You can choose the heading level through the prop
headingLevel. - Use a
MEDIUMsized Button for the close action
Horizontal
OverviewPromoCard can be rendered horizontally using the horizontal prop. It can stand on its own or be a part of a CardGroup.
HINT Open the example in the responsive viewer or in Playroom.
Texts
The texts in the OverviewPromoCard need to be brief and simple. Always ask a copywriter to write them for you.
Title
The title of promotion cards should be written in a short and actionable way. The title will be truncated after two lines, so try to avoid that. The title is mandatory.
Rules For Copywriters
- Supply short and actionable titles
- Aim for titles under 25 characters and never use titles longer than 35 characters
- Don’t shout! i.e. avoid exclamation marks
Use of emojis
Titles can include emojis, but they should usually be avoided. In exceptional cases, they can be used to draw attention and help communicate the message in a more visual way.
Rules For Copywriters
- Use emojis only as an exception
- Be inclusive in terms of gender, skin colour and similar
- Don’t use more than one emoji
- Don’t use generic smileys
Body
The body text will be truncated after four lines in grid view and after two lines in list view. Try to avoid that by making the text short. Same as title, the body text is mandatory.
Rules For Copywriters
- Supply concise body text in simple language
- Aim for text under four lines
- Don’t repeat what’s already in the title
- Don’t use rich text
- Don’t use emojis
Footer button
The footer represents a call to action. In ideal circumstances it is just a single verb. Do not write a full sentence as it will get truncated.
Media & Colours
Vertical (grid view) OverviewPromoCards support images and colours.
Horizontal (list view) OverviewPromoCards support colours only.
Icon
Icons are displayed in both vertical and horizontal OverviewPromoCards.
Rules For Designers
- The icon is displayed in 96px in vertical cards and 48px in horizontal cards
$color-blue-300 (#135ee2)icon is recomended for white cards- On coloured cards or cards with a background image,
$color-white (#ffffff)icon is recommended.
Colours
In addition to the default white, OverviewPromoCards can be dressed in one of the custom (product) colours.
When a colour is specified the card is inverted. You should provide a white icon in this case.
Images
Vertical OverviewPromoCards may use background images. In this case the icon won’t be shown.
Rules For Designers
- The main focus area of the image should be in the top half
- Allow 40px of space on the sides to be cropped on smaller screens
- Use a photographic or rich image related to the campaign
- Don’t use the campaign image to display a product icon
- Don’t use light images that will impair the readability of the text and don’t use low resolution and bad quality images.