'/%3e%3cellipse%20rx='11'%20ry='4.2'%20transform='rotate(120)'/%3e%3c/g%3e%3c/svg%3e "React")
Skip to content 
CSS Components Web Components '%20d='M61.1%2031.4H141L123.4.7H78.7zm53.7%2031.9H159l-15.9-26.8H98.8'%20opacity='.9'/%3e%3cpath%20fill='url(%23b)'%20d='M141.3%20100.3H61l17.6%2030.5h45zm-26.5-31.9H159l-15.9%2026.8H98.8'%20opacity='.9'/%3e%3cpath%20fill='%23010101'%20d='M78.6%20130.8%2041%2065.8%2079.1.8H37.9L.4%2065.8l37.5%2065z'/%3e%3c/g%3e%3c/svg%3e "Vanilla")
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:
Parameters
Parameters
Parameters are the attributes that can be used to customize the component when using it in a project. They apply to the WebComponents implementation and wrappers and to the Vue and React CSS implementations. Some parameters names change between the implementations, in order to follow the conventions of each technology and framework.
For example, the param model is named ngModel in Angular, modelValue in Vue, but stays as model in React.
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom params or properties:
| Name | Type | Slottable | 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: Also you can insert the value | |
size | number | Defines the image column size. Possible values are: | |
copyright | string | Defines the copyright text of the image | |
sources | object[] | Defines the sources 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 |
The color of the copyright text can be customized using the --z-image--copyright-color CSS custom property or the custom attribute.