Structured rich content inside a chat turn

Link previews, search results, booking-style responses. A message card gives rich content a quiet frame inside an assistant turn or bubble: media on top, a title and description in the body, actions in a footer. It is not the navigation Card. That one is a large-radius tile you click to go somewhere; this one is content furniture the conversation scrolls past.

Anatomy

An optional icon leads the title, a free-text meta line carries a domain or date in your own formatting, and the description stays to a line or two.

Design tokens, explained
fieldnotes.example · 4 min read

How a three-tier token architecture keeps a component library on one palette.

Link previews

The classic unfurl. The actions footer sits outside the body, mirroring the tool call footer, so link actions and approvals read as the same row across the ai components.

Harbour Line timetable
transit.harbourline.example

Departures every twelve minutes from Pier 4 until midnight.

Alpine pass conditions
roads.grimsel.example

Open to traffic. Chains recommended above 1,800 metres after dark.

With media

The media slot renders flush to the card edges with no padding of its own; the card clips it, so the corners round themselves.

Weekly signups
Updated this morning

Thursday is still the strongest day, holding the pattern from last month.

Inside a message

The intended habitat. The card claims no width of its own, so the turn that holds it sets the measure.

Mara Voss2:40 PM
When does the last ferry leave tonight?
Assistant2:41 PM

The last ferry back leaves at 11:48 PM. Full timetable below.

Harbour Line timetable
transit.harbourline.example

Departures every twelve minutes from Pier 4 until midnight.