Image

...

Browser support

...

Parameters

The Web component uses a <img> tag. Using the z-image HTML custom attribute will render the image CSS component .

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

Name	Type	Description
z-image	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.
image-src	string	Defines the image source URL.
size	number	Defines the image column size. Possible values are: 2, 3, 4, 5, 6.

INFO

If you want to insert a caption for the image, make sure to wrap the image with a <figure> tag and the caption with a <figcaption> tag.

Also for a copyright text use the image-copyright attribute inside the <figure> tag.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Image.css" />

Code

<img src="../sample.png" z-image="1:1:round" image-size="2" loading="lazy" alt="Test text" />
<img src="../sample.png" z-image="1:1" image-size="2" loading="lazy" alt="Test text" />
<img src="../sample.png" z-image="1:1" image-size="3" loading="lazy" alt="Test text" />
<figure image-copyright="Copyright" style="--z-image--copywrite-color	:#fff">
  <img src="../sample.png" z-image="1:1" image-size="4" loading="lazy" alt="Test text" />
</figure>