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: <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.

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 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.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.10/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.10/@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>