Stage banner - Web Component

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Parameters

The Web component uses the <z-stage-banner> tag:

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description	Slot
config (optional)	string	Configuration of the stage banner
shape (optional)	string	Shape of the stage banner
pictogram (optional)	string	Pictogram of the stage banner
image-src (optional)	string	URL of the image
category (optional)	string	Category of the stage banner

The available slots for the component are:

Name	Tags	Description
default	span
category	span

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

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

category

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

Content goes here

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.5.2/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.2/@zurich/web-components/stage-banner.js"></script>

Code

<z-stage-banner pictogram="gesture-risk" category="Category lorem ipsum" />
Headline lorem ipsum
</z-stage-banner>