Safe space - Web Component โ
Browser support โ
Parameters โ
The Web component uses the <z-safe-space>
tag:
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
config | string | The main parameter has two components following the pattern:
|
image-src (optional) | 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.