Safe space - Web Component ​

The SafeSpace component can be used imported from:

Playground ​

Parameters ​

...

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

HTML Examples ​

CodeSandbox example ​