AI Components / Data Card
Data Card
Compact inline key-value data display. Embed in chat messages, tool results, and insight cards. Shows any structured data with type-specific formatting.
ai-display v0.4.0
Playground
Examples
Invoice
<ai-data-card title="Invoice #1042" subtitle="Acme Corp" icon="DOC" headerStatus="warning" headerStatusLabel="Pending" style="max-width: 380px;"></ai-data-card>AI Model Info
<ai-data-card title="Claude 3.5 Sonnet" icon="AI" headerStatus="success" headerStatusLabel="Active" style="max-width: 380px;"></ai-data-card>Compact
<ai-data-card title="Order #8821" icon="PKG" compact style="max-width: 300px;"></ai-data-card>Loading
<ai-data-card loading style="max-width: 380px;"></ai-data-card>Import
import { AiDataCard } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-data-card';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Card title |
subtitle | string | — | Subtitle text |
icon | string | — | Header icon text |
headerStatus | "success"|"warning"|"error"|"info"|"neutral" | — | Header badge color |
headerStatusLabel | string | — | Header badge text |
fields | DataField[] | — | Key-value rows with optional type formatting |
actions | CardAction[] | — | Footer action buttons |
compact | boolean | false | Compact display mode |
loading | boolean | false | Show loading skeleton |
highlighted | boolean | false | Accent border |
Events
| Event | Detail | Description |
|---|---|---|
ai-data-card-action | {actionId, actionLabel} | Action button clicked |
ai-data-card-row-click | {label, value, type} | Row clicked |