Skip to content
Stage
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 Variable | Type | Description |
---|---|---|
--z-stage--bg | color | |
--z-stage--bg--mobile | color | |
--z-stage--color | color | |
--z-stage--color--mobile | color | |
--z-stage--gap | distance |
Accessibility
...