Images ​

...

Aspect ratios ​

...

These are the aspect ratios that we will consider for the designs:

We strongly recommend to use the Image component since it abstracts a lot of the complexity of using and adjusting images in the layouts.

Fallbacks and accessibility ​

...

  • alt: ...
  • onerror: ...
  • size: ...
html
<img
  z-image="16:9"
  src="..."
  alt="Alt text"
  onerror="this.onerror=null;this.src='/img/fallback.svg';"
/>

Alt text

This is handled by the Image component internally.

Here's the reference to the fallback image source.

Shape language ​

...

These are the values provided as part of the @zurich/design-tokens NPM library under tokens following the syntax --z-shape-{number}:

However, we strongly recommend to use the Shape component, since it provided the required adjustments to fit the shapes properly within the layouts and according to the designs.