SmilingZ - CSS Component ​

Browser support ​

Construction ​

The CSS component uses a <div> tag. Using the z-smiling-z HTML custom attribute will render the isotype logo CSS component.

z-smiling-z ​

The z-smiling-z parameter is the main parameter used to render the isotype logo component.

You can customize the color of the isotype using the --z-smiling-z--fill and the size of the isotype --z-smiling-z--size CSS custom properties.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/SmilingZ.css" />
Code
html
<div z-smiling-z></div>