Image
An image from a URL. A click opens it full-screen. Set description to say what the image shows, unless it is only decoration.
Examples
Loading examples…
Props
| Prop | Type | Description |
|---|---|---|
url | string | Image URL |
description | string | What the image shows, for screen readers. Leave it unset only for a decorative image |
variant | "icon" | "avatar" | "smallFeature" | "mediumFeature" | "largeFeature" | "header" | The size: "icon" 24px, "avatar" 40px round, "smallFeature" 160px wide, "largeFeature" and "header" full width. Default "mediumFeature": the natural size |
weight | number | flex-grow in a Row or Column |
aspectRatio | string | |
fit | "cover" | "contain" | "fill" | "none" | "scaleDown" | CSS object-fit. Default "cover" |
radius | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | number | string | object | |
width | number | string | |
height | number | string | |
maxWidth | number | string | |
maxHeight | number | string | |
minWidth | number | string | |
minHeight | number | string | |
background | string | |
frame | boolean | |
position | string | CSS object-position, for example "top" or "50% 20%" |
hideOnFailure | boolean | Default false |
fallback | string | Text shown in place of the image when it does not load |
hoverZoom | boolean | A slight zoom on hover |
lightbox | boolean | Default true: a click opens the image full-screen |
actionOverlay | object | A button over the bottom-right corner of the image. Without href, it sends onOverlayClick |
Events
onOverlayClick· Sent when the user clicks the actionOverlay button and it has no href.