Card

A bordered surface that groups a title, description, optional media and a footer byline/action, and can open into a larger "quick look".

When to use

• Browsable collections: listings, documents, notes, projects.
• When each item has a little more than one line of content plus an owner or action.
• Pass details when people need more context without leaving the grid; the card grows into a dialog and morphs back.
• Use MetricCard for a single number, a table (SortableDataTable) when items must be compared side by side, and Dialog for unrelated modal content.

Usage

import { Card } from "@/components/iris/card/card";

h(Card, {
  title: "Bright double room in Pangrati",
  description: "A 14 m² room in Athens at €420/month. Viewing on Thursday at 18:30.",
  media: h("img", { src: floorPlan, alt: "Floor plan of the flat" }),
  avatar: h(Avatar, { name: "Thanos Galanis", size: "sm" }),
  meta: "Thanos Galanis",
  status: "Updated today",
  action: h(Button, { size: "sm", variant: "secondary" }, "View"),
  details: h(ListingFacts), // optional quick look
});

Props

Prop	Type	Default	Description
title	string	— (required)	Heading. With details it becomes the button that opens the quick look.
description	string	—	Supporting copy under the title.
media	ReactNode	—	Visual at the top (image, illustration). Zooms slightly while hovered.
avatar	ReactNode	—	Small leading visual in the footer, usually an Avatar.
meta	ReactNode	—	Who the card belongs to, e.g. the owner's name.
status	string	—	Short line under meta. Changed words rise in and are announced politely.
action	ReactNode	—	Trailing footer control.
details	ReactNode	—	Quick-look content. When set, the card opens into a larger view; Escape or the close button morphs it back.
open / defaultOpen / onOpenChange	boolean / boolean / (open) => void	— / false	Controlled or uncontrolled quick-look state.
children	ReactNode	—	Extra content rendered after the description.

Notes

• The quick look is a Radix Dialog (focus trapped, Escape closes, title and description wired up) and portals to body.
• The surface, media, title and byline travel on one spring; under reduced motion the dialog simply fades.
• Long status text truncates on a single line; keep it short ("Updated today").
• Uses the theme's surface, line, line-strong, shadow-raised, shadow-floating, rounded-panel and rounded-surface.