Image

Zurich imagery focuses on things that will have the biggest impact: people in action, ready to change the world. For complete brand guidance please visit Zurich BlueRoom.

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

Implementations

The component Image is available in the following technologies:

CSS Components

Web Components

Parameters

Parameters

Make sure you have read about the parameters in here.

The parametrization of the component can be done with the following custom params or properties:

Name	Type	Slot	Description
image-src	string	✅	Defines the image source URL.
image-alt	string		Defines the alternative text of the image
config	string		Defines the aspect ratio for the image. Possible values are: full-width, 3:2, 1:1, 4:3, 16:9. Also you can insert the value 1:1:round to get a rounded image only for 1:1 aspect ratio.
size	number		Defines the image column size. Possible values are: 2, 3, 4, 5, 6.
copyright	string		Defines the copyright text of the image
sources	object[]		Defines the sources of the image
cross-origin	string
eager	boolean		Defines the eager loading of the image
blank-fallback	boolean		Defines the blank fallback of the image
custom	object
custom-str	string
z-theme	string

From Figma to code

You can check the Figma implementation here. This are the available properties:

• Size select
• Type select

Customization

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS Variable	Type	Description
--z-image--copyright-color	color	Copyright foreground color
--z-image--bg	color	Background color
--z-image--width	distance	Width of the image
--z-image--height	distance	Height of the image
--z-image--radius	distance	Radius of the image
--z-image--fit	distance	Type of fit

The color of the copyright text can be customized using the --z-image--copyright-color CSS custom property or the custom attribute.

Related components