Component Catalog
Card
Content container with optional title header.
A2UI → Nuxt UI Mapping
| A2UI Property | Nuxt UI Result |
|---|---|
child | Content rendered inside UCard body |
title | Text in UCard header slot |
Example JSONL
{"version":"v0.10","createSurface":{"surfaceId":"card_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"card_demo","components":[
{"id":"root","component":"Column","children":["profile"]},
{"id":"profile","component":"Card","child":"content","title":"User Profile"},
{"id":"content","component":"Column","children":["name","email","action"]},
{"id":"name","component":"Text","text":"Jane Doe","variant":"h3"},
{"id":"email","component":"Text","text":"jane@example.com","variant":"caption"},
{"id":"action","component":"Button","label":"Edit Profile","variant":"outline"}
]}}
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
child | ComponentId | ✅ | — | ID of the child component to render inside |
title | string | — | — | Optional title for the card header |
Rendering Details
- Maps directly to Nuxt UI's
UCardcomponent - Title renders in the
#headerslot as an<h3> - Child content renders in the default slot
- Supports both single child and multiple children (if child is a layout component)
Try It
Copy the JSONL above and paste it in the Playground Paste tab.