Safe space - CSS Component ​

The SafeSpace component can be used imported from:

Playground ​

Construction ​

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

z-safe-space ​

The z-safe-space is the main HTML custom attribute used to render the safe space CSS component. This attribute has two optional modifiers, that can be applied in order using colon (:) as the separator.

The pattern would be: <?zLetterSize><?:size>

safe-space
zLetterSize ​

The zLetterSize parameter is used to define the size of the letter inside the safe space. Possible values are: 2, 3, 4, 5.

Size ​

The size parameter is used to define the size of the safe space. Possible values are: 20, 25, 30, 35, 40, 45 & 50. Default value is 20.

Special uses ​

Image ​

The safe-space component can also have an image as a background.

safe-space

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​