Image - Web Component
Browser support
Parameters
The Web component uses the <z-image> tag:
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description |
|---|---|---|
image-src | string | Defines the image source URL. |
config(optional) | string | Defines the aspect ratio for the image. Possible values are: Also you can insert the value |
size(optional) | number | Defines the image column size. Possible values are: |
copyright(optional) | string | Defines the copyright text of the image |
caption(optional) | string | Defines the caption text of the image |
image-src
The image-src parameter is used to define the image URL to be displayed.
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.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.3.10/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.10/@zurich/web-components/image.js"></script>Code
html
<z-image image-src="../sample.png" config="1:1:round" size="2"></z-image>
<z-image image-src="../sample.png" config="1:1" size="2"></z-image>
<z-image image-src="../sample.png" config="1:1" size="3"></z-image>
<z-image image-src="../sample.png" config="1:1" size="4" copyright="copyright"
style="--z-image--copywrite-color :#fff"></z-image>