Stage Banner
The Stage Banner offers a different approach to the header design, compared to the main Stage component, since it doesn't show the Zurich Safe Space. It also takes less space on the screen making it ideal for situations where showcasing the brand identity takes second place and the primary focus should be the main page content.
A Stage it's the first element users see on a website and brings them into the content of the page.
Usage guidelines
When to use
- As an alternative to Stage, where showcasing the brand identity takes second place and the primary focus should be the main page content.
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
Anatomy
Stage Banner - Pictogram or Image
- Background
- Pictogram or image
- Category pre-line (optional)
- Headline
Stage Banner - Shape
- Background
- Headline
- Category pre-line (optional)
- Shape
Variants
Stage Banner comes in three variants: Pictogram, Image and Shape.
Stage Banner Pictogram / Image
The Stage Banner Image should be used when there is an image or pictogram to add visual impact to the content of the page.
Stage Banner Shape
The Stage Banner Shape should be used when there is no image or pictogram to add visual impact to the content of the page. It uses only the shape element to strengthen the brand identity.
There are four different layout possibilities for Shape Stage Banner, depending on the alignment of shapes and text:
Size
Stage Banners are available in four different sizes: Desktop, Tablet landscape, Tablet portrait and Mobile.
Styling
Background color
Any brand or secondary color palette can be set as a background color in Stages (see Foundations - Color). Make sure there is enough contrast between the text and the underlying banner background. For a more detailed explanation on how to pick colors following branding specifications, check the Colors section of the Brand Manual in BlueRoom.
For the Shape variant, the shape element can be exchanged for another shape arrangement and colors. 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.
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 Stage Banner 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 and alignment
Stage Banners, as 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.
Accessibility guidelines
Design considerations
- Always make sure there is enough contrast between the text and Stage Banner's background color.