Stage banner - Web Component ​

The StageBanner component can be used imported from:

Playground ​

Parameters ​

...

Events ​

This component has events. Check the documentation about how to use the events.

NamePayloadDescription

Slots ​

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
defaultspanThe headline of the stage banner
categoryspanThe category of the stage banner

Parameters use ​

shape ​

The shape attribute it's used to define the shape we want to render.

Content goes here

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.
Content goes here

Image ​

pictogram ​

The pictogram attribute it's used to define the pictogram we want to render.

Content goes here
image-src ​

The image-src parameter is used to define the image URL to be displayed inside Stage Banner.

Content goes here

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.

Content goes here

We can also use the image slot:

Content goes here

category ​

The category attribute it's used to write the category name above the content.

Content goes here

Also you can use the category slot:

Welcome to ZDSContent goes here

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​