Skip to content 
Stage content
Content goes here Welcome to ZDS Content goes here
Content goes here Content goes here
Content goes here Content goes here
Content goes here Content goes here 
Content goes here 
Content goes here Lorem ipsum Click me
Stage - Web Component
The Stage component can be used imported from:
Playground
Parameters
The Web component uses the <z-stage> 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 |
|---|---|---|---|---|
content | string | The stage content | default | |
header | string | Header of the stage | header | |
config | string | Configuration of the stage | ||
image-src | string | URL of the image | ||
image-alt | string | Alt text of the image | ||
no-safe-space | boolean | Whether to use safe space | ||
shape | string | Shape to use for the stage |
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 | Content of the stage |
header | span | Header of the stage |
actions | span | Actions of the stage |
Parameters use
content
The content attribute is inject the main quote or using the default slot:
header
The header parameter is a string that defines the stage header or using the header slot.
shape
Or using a slotted z-shape. No need to set the :flip, it's automatically handled.
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.
slim
The slim modifier is used to reduce the padding of the stage content.
Image
image-src
The image-src parameter is a string that defines the stage image source for the safe-space.
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 picture slot, even with GIF images:
Content goes here Content goes here Actions
You can use the actions slot to add some extra interactive elements:
Flags
no-safe-space
You can remove the SafeSpace using this flag:
Browser support
Detected engine:
Chromium
Webkit
Gecko