Safe space - Web Component

...

Browser support

Parameters

The Web component uses a <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: <zLetterSize><?:size> where: zLetterSize: [number] defines the size of the letter inside the safe space. Possible values are: 2, 3, 4, 5. size: [number] defines the size of the safe space. Possible values are: 20, 25, 30, 35, 40, 45, 50 (rem).
image-src (optional)	string	Defines the `src` attribute pointing to the image.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.7/@zurich/web-components/safe-space.js"></script>

Code

<z-safe-space config="4:20"></z-safe-space>
<z-safe-space config="3:25" image-src="../sample.png"></z-safe-space>