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 |
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 tne image slot:
Content goes here Actions
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.
Browser support
Detected engine:
Chromium
Webkit
Gecko