Safe space - Web Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Parameters
The Web component uses the <z-safe-space> 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 |
|---|---|---|---|
config | string | The main parameter has two components following the pattern:
| |
image-src | string | Defines the `src` attribute pointing to the image. |
config
The config parameter is used to define the size of the letter and the size of the safe space. Following the pattern: <zLetterSize><?:size>
zLetterSize
The zLetterSize parameter is used to define the size of the letter inside the safe space. Possible values are: 2, 3, 4, 5.
size
The size parameter is used to define the size of the safe space.
The size of the safe space can also be customized using the --z-safe-space--size CSS custom property.
image-src
The image-src parameter is used to define the image URL to be displayed inside 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.
You can determine the x and y position of the image inside the safe space using the --z-safe-space--image-x and --z-safe-space--image-y CSS custom properties.
Also the background color is customizable using the --z-safe-space--bg CSS custom property.