Skip to content 
Safe space
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the "How it works" documentation.
| CSS Variable | Type | Description |
|---|---|---|
--z-safe-space--bg | color | Background color |
--z-safe-space--size | distance | Size of Safe Space |
--z-safe-space--image-x | distance | Image x adjustment |
--z-safe-space--image-y | distance | Image Y adjustment |
The background color is customizable using the --z-safe-space--bg CSS custom property.
The size of the safe space can also be customized using the --z-safe-space--size CSS custom property.
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.