ContextCards

A stack of retrieved knowledge chunks, each with a title, size, excerpt and a source-file chip.

When to use

• Show the retrieval context behind an answer (RAG chunks), so people can see which document each passage came from.
• Pair with StreamingText or ChatPanel to show the evidence for a reply.
• Not for web search results with links — use ThinkingState with variant="Search". Not for inline citations inside prose — use StreamingText.

Usage

import ContextCards from "@/components/iris/context-cards/context-cards";

h(ContextCards, {
  labels: { header: "All chunks", count: "24" },
  chunks: [
    {
      title: "FairRent scoring rule",
      chars: "290 characters",
      body: "Score = 50 − 50·log2(price ratio)…",
      source: "FairRent API guide.pdf",
      badge: "PDF",
      tone: "bg-red",
    },
    {
      title: "Dataset catalog row",
      chars: "1,250 characters",
      body: "Mortgage lending volume: ECB, million EUR…",
      source: "Dataset catalog.csv",
      badge: "CSV",
      tone: "bg-green",
    },
  ],
});

Props

Prop	Type	Default	Description
chunks	{ title: string; chars: string; body: string; source: string; badge: string; tone: string }[]	2 FairRent and dataset chunks	One card per chunk. badge is the short file-type label in the chip, and tone is a background utility class for the badge (for example bg-red, bg-green or bg-accent).
labels	Partial<{ header: string; count: string }>	All chunks / 32	Header text and the count pill.
className	string	—	Extra classes on the outer column (max 380px wide).
variant	string	—	Accepted for gallery parity. It has no effect.

Notes

• title doubles as the React key, so keep titles unique.
• Cards fade up in sequence, and the source chips pop in after about 700ms.
• The source chip is a styled <span>, not a link. Wrap it or swap it if the source should open.
• Reads --surface, --inset, --line, --ink, --ink-2 and --ink-3, plus shadow-card and shadow-btn.