Card

kai-card

The shared card chrome all generative-UI cards build on — a themed Shadow DOM surface with heading, description, media, body, and actions slots.

• Shadow DOM
• Chrome only — no events
• 4 scalar attributes
• Media + actions slots
• Shared error state

Preview

When to use

Use <kai-card> around passive content — a summary block, a generated report preview, any output that needs no user interaction. All typed cards (<kai-confirm>, <kai-form>, <kai-choice>, etc.) compose from it.

Usage

All four props are scalar attributes — set them as HTML attributes or DOM properties:

<kai-card heading="Workspace summary" description="Generated just now.">
  <p>Your repository has 3 open pull requests and 12 passing checks.</p>
</kai-card>

• Default slot — card body; any passive content.
• slot="media" — full-width region above the heading; drop in an <img> or block element.
• slot="actions" — footer for read-only metadata or status labels (not interactive controls).
• error-message — replaces the body and actions with the shared inline error UI; remove the attribute to restore the normal view.

Examples

Content Surface

Code

With Media Slot

<kai-card heading="Quarterly report" description="Generated just now.">
  <img slot="media" src="/preview.png" alt="Report preview" />
  <p>Your Q2 numbers are ready to review.</p>
</kai-card>

Code

With Actions Slot

slot="actions" — passive metadata such as timestamps or file sizes in the card footer.

Code

Heading Only

Code

Inline Error State

Set error-message to render the shared inline error treatment — body and actions are replaced.

Code

Dense

dense tightens spacing — useful in a tight list or feed of multiple cards.

Code

Props

Property	Type	Default	Notes
heading	string	—	Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`.
description	string	—	Supporting text under the heading. Attribute: `description`.
errorMessage	string	—	When set, the card renders its inline error state instead of the body. Attribute: `error-message`.
dense	boolean	false	Compact spacing for dense lists. Attribute: `dense`.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

Card

---

Need a hand? Report a bug Ask for help