Image
A responsive image, optionally wrapped in a link.
A responsive image, optionally wrapped in a link.
| Prop | Type | Default | Description |
|---|---|---|---|
srcrequired | url | — | Image URL (use an absolute, hosted URL). |
alt | string | — | Alternative text (shown if the image can't load). |
href | url | — | Make the image a link to this URL. |
width | number | — | Container (frame) width in px. The image scales to fill it; defaults to full content width. |
height | number | — | Optional frame height in px. By default the height adapts to the image's aspect ratio — set this to pin an explicit height. |
objectFit | enumcover | contain | fill | — | How the image fills the frame when a height is set: cover (crop), contain (letterbox), or fill (stretch). Client support varies. |
backgroundColor | color | — | Frame background shown around the image when “contain” leaves gaps. |
borderRadius | number | — | Corner rounding in px. |
align | enumleft | center | right | center | Horizontal alignment. |
borderWidth | number | — | Frame border stroke width (px). |
borderStyle | enumsolid | dashed | dotted | — | Frame border stroke style. |
borderColor | color | — | Frame border stroke color. |
Common props
Every component accepts these on top of its own props.
| Prop | Type | Default | Description |
|---|---|---|---|
marginBottom | number | 16 | Vertical space (px) below the block. |
className | string | — | Tailwind-style utility classes compiled to inline CSS at render (e.g. "mt-4 text-zinc-500 sm:hidden"). Responsive/pseudo variants are hoisted into a <style> block. class and tw are accepted as aliases in code. |
customCss | css | — | Extra inline CSS declarations merged onto the block's root element (e.g. "letter-spacing: 1px; opacity: 0.9"). Inlined so it survives every client. |
Set one side at a time with the padding and margin objects in the visual editor's inspector.