Safe space

...

Browser support

...

Parameters

The CSS component uses a div or an img tag depending if the Safe Space component has a background image or not.

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
z-safe-space	string	The main parameter has two components following the pattern: <size><?:zLetterSize> where: size: [number] defines the size of the safe space. Possible values are: 20, 25, 30, 35, 40, 45, 50 (rem). zLetterSize: [number] defines the size of the letter inside the safe space. Possible values are: 2, 3, 4, 5.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.6/@zurich/css-components/javascript.js" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/SafeSpace.css" />

Code

<div z-safe-space="20:4"></div>
<img z-safe-space="25:3" src="../sample.png" loading="lazy" />