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: ...
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.