Skip to content 
The slotted
Safe space - Web Component
The SafeSpace component can be used imported from:
Playground
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 | A11y |
|---|---|---|---|---|
config | string | The main parameter has two components following the pattern:
| ||
image-src | string | Defines the `src` attribute pointing to the image. |
Parameters use
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.
Image
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.
Special uses
The slotted <img>
This component can receive the <img> tag in the picture slot and still maintain the config:
Attention!
This approach has limitations. Test it in your setup.
Browser support
Detected engine:
Chromium
Webkit
Gecko