Image - Web Component
The Image component can be used imported from:
Playground
Parameters
The Web component uses the <z-image> tag:
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 HTML params:
| Name | Type | Description | Slot | A11y |
|---|---|---|---|---|
image-src[required] | 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 | ||
caption | string | Defines the caption text of the image |
Parameters use
Image
image-src
The image-src parameter is used to define the image URL to be displayed.
image-alt
The alt attribute of teh image for accessibility
config
The config parameter is used to define the aspect ratio for the image. Possible values are: full-width, 3:2, 1:1, 4:3, 16:9.
The 1:1 aspect ratio can be rounded by adding the round value to the config or by simply use round value (e.g. config="1:1:round" or config="round").
size
The size parameter is used to define the image column size. Possible values are: 2, 3, 4, 5, 6. Check the size section for more information.
copyright
The copyright parameter is used to add a short copiright text information, if necessary.
You can customize the color of the copyright text using the --z-image--copyright-color CSS custom property.
caption
The caption parameter is used to add a short caption and concise description of the image or topic.
Browser support
Detected engine:
Chromium
Webkit
Gecko