Skip to content

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.

Stage Banner Overview

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

From Figma to code

...

Customization

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS VariableTypeDescription
--z-stage-banner--bgcolor
--z-stage-banner--colorcolor

Accessibility

...