Skip to content 
Content goes here
Content goes here
Content goes here
Content goes here Content goes here 
Content goes here
Content goes here Welcome to ZDSContent goes here
Stage banner - Web Component
The StageBanner component can be used imported from:
Playground
Parameters
The Web component uses the <z-stage-banner> tag:
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 HTML params:
| Name | Type | Description | Slot | A11y |
|---|---|---|---|---|
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 |
Events
This component has events. Check the documentation about how to use the events.
| Name | Payload | Description |
|---|
Slots
This component has slots. Check the documentation about how to use the slots.
| Name | Tags | Description |
|---|---|---|
default | span | The headline of the stage banner |
category | span | The category of the stage banner |
Parameters use
shape
The shape attribute it's used to define the shape we want to render.
config
The configattribute only affects the shape variant. The configurable modifiers are:
left- Puts the shape on the left side of the banner.center- aligns the content to the center.
Image
pictogram
The pictogram attribute it's used to define the pictogram we want to render.
image-src
The image-src parameter is used to define the image URL to be displayed inside Stage Banner.
You can also use the images from the Zurich media images. Make sure you specify correctly the name of the image you want to display.
We can also use the image slot:
Content goes herecategory
The category attribute it's used to write the category name above the content.
Also you can use the category slot:
Browser support
Detected engine:
Chromium
Webkit
Gecko