Go to Content
Design System
Playroom Storybook
#ClimateEmergency

OverviewPromoCard Beta

Open in Storybook

OverviewPromoCard serves for displaying promotions in overview, along the regular OverviewCards. It supports both vertical (grid view) and horizontal (list view) orientations.

Loading demo…
Loading demo…

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.

Loading demo…
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 MEDIUM sized 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.

Loading demo…

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

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.

Loading demo…
Loading demo…
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.

Loading demo…

Images

Vertical OverviewPromoCards may use background images. In this case the icon won’t be shown.

Loading demo…
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.