Promo ​

Promo is a component meant to highlight a specific topic, make the users curious and lead them to related unabridged content. The choice of themes must be well considered to guide the users well in their journey through the website.

Overview

Usage guidelines ​

When to use ​
  • As a teaser to promote a product, feature or event on your web page.
When not to use ​
  • Do not use at the top of a page to introduce the page content to users; use Stage instead.
Writing guidelines ​

Length

Keep the title and the description concise, while being descriptive.

Capitalization and case

Write all text in sentence case.

Specifications ​

Anatomy ​

Anatomy
  1. Background
  2. Image
  3. Title
  4. Category (optional)
  5. Text
  6. Button
  7. Shape (optional)

Variants ​

There are four different variants of Promos:

  • Content: Full-width or Narrow content.
  • Alignment: Left or Right.
Variants

Size ​

Promos are available in four different sizes: Large, Medium, Small and Extra small.

Size

Styling ​

Promos are available for both light and dark themes.

Dark Theme
Light Theme

Background Color

For the background color of the Promo component, there are two possible options:

  • Using a color from the brand color palette (see Foundations - Color).
  • Using a inclusive color taken from the photography used. For a more detailed reference on how to pick and use inclusive colors, check the corresponding section of the Brand Manual in BlueRoom.

For a more detailed explanation on how to pick colors following branding specifications, check the Colors section of the Brand Manual in BlueRoom. Specifically, take into account that colors from the Secondary palette are not allowed to be used together with photography, use an inclusive color instead.

Add the shape element only if the promo background color is different from the page's. Shapes must always be grounded.
Don't leave the shapes floating. Remove them if the background colors match.

Whatever color is used, you have to make sure that it has enough contrast with all the other elements in the component (texts, buttons, navigation and shapes), following the guidelines on accessibility of colors we detail in the UX Guidelines section of this documentation here.

Shape Language

The Promo component includes some shape language accompanying the photography safe space. We provide you with a collection of six shape combinations that will work with any size and alignment variant of the component, and you can change the default shape included in the component by selecting the Shape layer in Figma (left sidebar, Layers panel) and replacing the shape2 instance in the right sidebar panel (see Stage component).

In doing so, it's very important that you make sure that you follow the specifications and guidelines indicated in the Shape Language section of the Brand Manual in BlueRoom.

Behavior ​

Positioning ​

Promo can be positioned anywhere between page contents but never at the top of a page.

Alignment ​

Promo component extends full width for every viewport.

Grouping

If you need more than one promo, stack them together without leaving space in between. Make sure background adjacent background colors create enough contrast, so they can be distinguished easily.

Grouping

Interaction ​

The only interactive element in a promo is the button, which redirects users to the full promoted content (a link to a web page, a file to download, etc.)

Accessibility ​

Design Considerations ​

  • Always make sure there is enough contrast between the text color and the background color in promos.

Keyboard Considerations ​

  • Tab: to move focus between controls.
  • Space / Enter: to activate a control.