Stage ​

Overview

The stage represents our main header component. It is a great way to highlight important content at the top of a page, together with the safe space and the usage of an inclusive color, it is a good visual representation of our brand identity and visual language. There are adapted versions of the stage component covering all breakpoints (Desktop, Tablet Landscape, Tablet Portrait and Mobile).

It should have a strong focus and visual interest and can be used in a variety of ways: only with copy and without action, with a button or a link or even with a dropdown.

Usage guidelines ​

When to use ​
  • At top of the a web page to introduce the content of the page in a visual, branded manner.
When not to use ​
  • Do not use to promote content nor as a banner in-between other page elements; use Promo instead.
Writing guidelines ​

Length

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

Capitalization and case

Write all text in sentence case

Specifications ​

Stage Anatomy
  1. Background: Can be of any primary or secondary palette color, as well as of any inclusive color.
  2. Safe Space: Can include an image or video.
  3. Header
  4. Description
  5. Scroll Arrow (optional): Allows for scroll if there's a stage carousel on larger viewports.
  6. Button (or input field)
  7. Carrousel (optional)
  8. Shape

Types ​

The stage component comes in two types: Default and Slim.

The Stage Slim is a compact version of our main Stage component. It has the same visual style as the main Stage component but takes less vertical space on the screen, allowing you to use it in situations where you want to avoid the user having to scroll before getting to the main content of the page.

Stage default
Stage Slim

Variants ​

Stage (default)

There are four different variants of Stage:

  • With Safe Space aligned on the right or left.
  • With a Button or Input field.
Stage - Left / Button
Stage - Left / Input field

Stage Slim

There are two different variants of Stage Slim:

  • With Safe Space aligned on the right or left.
Stage slim - Left
Stage slim - Right

Size ​

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

Stage sizes

Styling ​

Stages are available in both light and dark theme.

Dark
Light

Background Colors

For the background color of the Stage 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.

With Brand color
With Brand color
With Inclusive color
With Inclusive color
Don't use a color from the secondary palette as background color together with an image, use an inclusive color instead.
Don't use a color from the secondary palette as background color together with an image, use an inclusive color instead.

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.

Shapes

The Stage 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 shape1 instance in the right sidebar panel:

Select Shape layer
Select Shape layer
Replace Shape instance
Replace Shape instance

You can modify shape language to better suit your design in two ways:

  • Change the default color of the provided shapes depending on your choice of background color and photography (selecting the Shape layer in the left Layers panel in Figma, and replacing the colors in the right Design panel).
  • You can replace the all the shape altogether by one of your own (adding yours as a Local Component and replacing the instance as indicated above).

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.

Don't use shapes that overlap with other elements inside the component.
Don't use shapes that overlap with other elements inside the component.
Don't use shapes that are too small or too big in relation to the size of the safe space.

Behavior ​

Positioning and Alignment ​

Stages introduce users to the content of a page, therefore they are always placed at the top of a page. Stages span full-width on any page.

Stage Positioning

Interaction ​

Interaction in Stages can happen in several way: through a call to action, an input field or by scrolling among slides in a Stage carousel.

Accessibility ​

Design Considerations ​

  • Always make sure there is enough contrast between the text, button and other elements' color and the background color of Stage.

Keyboard Interaction ​

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