Image ⚠️ Experimental ​

The Image component can be used imported from:

Playground ​

Parameters ​

Slots ​

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
image-srcpicture

Parameters use ​

Check the documentation about how to use the parameters.

Image ​

image-src ​

The image-src parameter is used to define the image URL to be displayed. GIF images can also be used, but we recommend to convert them into .webp for optimization:

image-alt ​

The alt attribute of the 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.

The copyright parameter is used to add a short copyright text information, if necessary.

sources ​

We can also use the slotted configuration via the default slot using <source> tags:

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

CodeSandbox example ​

Sorry, not available yet ☹️