Safe space - CSS Component ​

...

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Construction ​

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

Size ​

...

Image ​

safe-space

Playground ​

Customization ​

HTML Examples ​

Imports
html
<script type="module" src="/0.5.1/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.5.1/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.1/@zurich/css-components/SafeSpace.css" />
Code
html
<div z-safe-space="4:20"></div>
<img z-safe-space="3:25" src="../sample.webp" loading="lazy" />