'/%3e%3cellipse%20rx='11'%20ry='4.2'%20transform='rotate(120)'/%3e%3c/g%3e%3c/svg%3e "React")
Skip to content 
Stage Banner CSS Components Web Components '%20d='M61.1%2031.4H141L123.4.7H78.7zm53.7%2031.9H159l-15.9-26.8H98.8'%20opacity='.9'/%3e%3cpath%20fill='url(%23b)'%20d='M141.3%20100.3H61l17.6%2030.5h45zm-26.5-31.9H159l-15.9%2026.8H98.8'%20opacity='.9'/%3e%3cpath%20fill='%23010101'%20d='M78.6%20130.8%2041%2065.8%2079.1.8H37.9L.4%2065.8l37.5%2065z'/%3e%3c/g%3e%3c/svg%3e "Vanilla")
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.
UX/UI Guidelines
Check the design documentation of the component in ZeroHeight.
Implementations
The component StageBanner is available in the following technologies:
Parameters
Parameters
Parameters are the attributes that can be used to customize the component when using it in a project. They apply to the WebComponents implementation and wrappers and to the Vue and React CSS implementations. Some parameters names change between the implementations, in order to follow the conventions of each technology and framework.
For example, the param model is named ngModel in Angular, modelValue in Vue, but stays as model in React.
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom params or properties:
| Name | Type | Slottable | Description |
|---|---|---|---|
config | string | Configuration of the stage banner | |
shape | string | Shape of the stage banner | |
pictogram | string | Pictogram of the stage banner | |
image-src | string | URL of the image | |
category | string | Category of the stage banner | |
custom | object | A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format. Example: html | |
custom-str | string | The stringified version of the Example: html | |
z-theme | string | Sets the theme of the component. The possible values are html |
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the "How it works" documentation.
| CSS Variable | Type | Description |
|---|---|---|
--z-stage-banner--bg | color | Background color of the stage banner |
--z-stage-banner--color | color | Color of the stage banner |
Accessibility
...