Card

Container Layout draft Gen UI part

The one surface a bot message can hold. Never put a card inside a card.

Examples

HTML and CSS

Framework-free reference. Styles live in system/components/card.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
`variant`	elevated \| raised \| outlined \| filled \| tinted \| inverse \| solid	elevated
`tone`	accent \| accent-2 \| accent-strong
`density`	md \| dense \| flush	md
`align`	start \| center
`decoration`	none \| blob
`border`	none \| accent

* required.

Slot rules

children: Image, Text, Stack, List, KeyValue, Tabs, MapSnippet, Progress, Divider, ActionRow. Order: media, title, meta, body, data, actions. ActionRow is last. At most one filled button in the whole card.

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

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

bubble A message bubble holds text, or exactly one Card, Carousel or Text (or Progress dots while typing).

no-nested-cards Cards never nest inside cards, at any depth.

order Inside a card: media, title, meta, body, data, actions.

actions-last An ActionRow is always the last child of its card or sheet.

one-filled At most one filled button per card. Other actions are tonal or text.

carousel-count A carousel holds 3 to 5 cards.

group-attribution In group context every card shows who triggered it (a Text or Avatar with attribution: true).

Usage in recipes

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

Bot functions: Bill split and payments, Bookings, Bot foundation, Calendar and itinerary, Community and PopTonight picks, Email connect, Friend catchups, Friends nearby, Group plans, Learn from chats and posts, Meet new people, More booking, Occasions and events, Onboarding and profile, Plan capture, Plan day and live ETA, Suggestions, Trips, Trust and vouches, Video calls with notes, Voice calls with notes.