Stage - Web Component
...
Browser support
Detected engine:
Chromium
Webkit
Gecko
Parameters
The Web component uses the <z-stage> tag:
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description | Slot |
|---|---|---|---|
header | string | Header of the stage | header |
config(optional) | string | Configuration of the stage | |
image-src(optional) | string | URL of the image |
The available slots for the component are:
| Name | Tags | Description |
|---|---|---|
default | span | |
header | span | |
actions | span |
header
The header parameter is a string that defines the stage header.
Content goes here
config
The config parameter is a string that defines the stage configuration. You can configure the alignment and the padding of the stage content.
left
The left modifier is used to align the stage content to the left.
Content goes here
slim
The slim modifier is used to reduce the padding of the stage content.
Content goes here
image-src
The image-src parameter is a string that defines the stage image source for the safe-space.
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
The content of the Stage component is customizable. Check the stage anatomy guidelines for more details.
Also you can customize the background color of the stage component, using the --z-stage--bg CSS custom property.