Logo - CSS Component ​

Browser support ​

Construction ​

The CSS component uses a <div> tag, with the z-logo HTML custom attribute.

The z-logo attribute is the main attribute used to render the logo CSS component.

The z-logo attribute has a modifier to render the logo in an inline version. This modifier is used by adding the inline attribute to the z-logo attribute.

You can customize the color of the logo using the --z-logo--fill CSS custom property, also the size using the --z-logo--size CSS custom property.

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/Logo.css" />
Code
html
<div z-logo></div>
<div z-logo="inline"></div>