Image

Primitive Content draft Gen UI part

A washed photo or a tinted placeholder at a fixed ratio.

Examples

HTML and CSS

Framework-free reference. Styles live in system/components/image.css and read only tokens. Wrap markup in .v-root.

Rendered markup of the anatomy example

Props and slots

The component API. Gen UI JSON uses these names, and the Flutter widget should mirror them.

Props

Prop	Values	Default
`src`	string
`alt`	string
`ratio`	21:9 \| 16:9 \| 3:2 \| 4:3 \| 1:1 \| 3:4	16:9
`tone`	accent-2 \| accent \| neutral	accent-2
`placeholder`	string
`bleed`	boolean
`scanning`	boolean
`width`	number

* required.

Slot rules

No slots. This part takes no children.

In Gen UI

How VelioBot uses this part. The bot returns JSON; the validator checks it; the renderer draws it.

JSON node

Every node may also carry id, grow, attribution, privateOnly and fallbackText.

Rules that name this part

listitem-leading List item leading: Icon, Avatar, Avatar stack, Image, Checkbox, Radio (and Time in stacked format).

card-children Card children: Image, Text, Stack, List, KeyValue, Tabs, MapSnippet, Progress, Divider, ActionRow.

Usage in recipes

5 of the original cards use it. Needed for V1. Priority table

Bot functions: Bill split and payments, Bookings, Community and PopTonight picks, Friends nearby, Group plans, Meet new people, More booking, Occasions and events, Suggestions, Trips.