Media Components
Image and Icon — the widget builder's visual asset components.
Media Components
Image
Renders an <img>, cropped to fill its box.
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL. Supports {variable} interpolation. |
alt | string | — | Alt text. Supports {variable} interpolation. |
height | number | 160 | Height in px. Width always fills the container; the image is cropped (object-fit: cover) to match. |
Icon
Renders one of a curated set of SVG icons from a fixed name, size, and theme color catalog. The icon glyph is fixed markup; use the documented props and action wiring below.
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Required. One of the icon names below. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "md" | Rendered size, 12–40px. |
color | string | "primary" | A theme color token: primary, secondary, success, danger, warning, info, discovery. |
Available icon names
star, map-pin, check-circle, mail, phone, calendar, search, globe, profile,
document, sparkle, bolt, info, lightbulb, x, check, circle, chevron-right,
heart, clock, arrow-right, external-link.
{ "component": "Icon", "props": { "name": "check-circle", "size": "lg", "color": "success" } }
Like other components, Icon accepts an onClickAction — see Functions for how to
wire it to a click handler.