Safe space - CSS Component
...
Browser support
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.3.7/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/SafeSpace.css" />
Code
html
<div z-safe-space="4:20"></div>
<img z-safe-space="3:25" src="../sample.png" loading="lazy" />