Skip to content

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.

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--bgcolor
--z-stage--bg--mobilecolor
--z-stage--colorcolor
--z-stage--color--mobilecolor
--z-stage--gapdistance

Accessibility

...