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
Playground
Customization
HTML Examples
Imports
html
<script type="module" src="/0.5.0/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@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" />