kai-card
Slots for media, a header, and a footer take whatever you put in them while the surface stays consistent.
- Shadow DOM
- 5 structural slots
- appearance + orientation
- 6 styleable parts
- dismissible / clickable
Preview
Section titled “Preview”Anatomy
Section titled “Anatomy”The body is the default slot. The rest are structural regions, each rendered only when filled:
slot="media"— full-bleed image, video, or illustration. Pinned to the top (vertical) or start (horizontal), clipped to the card corners.slot="header"— header content, e.g. a title.slot="header-actions"— an actions cluster at the end of the header row.- default slot — the body.
slot="footer"— footer content.slot="footer-actions"— buttons at the end of the footer row.
<kai-card appearance="filled" dismissible> <img slot="media" src="/preview.png" alt="Report preview" /> <h3 slot="header">Quarterly report</h3> Your Q2 numbers are ready to review. <button slot="footer-actions">Open</button></kai-card>Examples
Section titled “Examples”Header and body
Section titled “Header and body”Full-bleed media at the top, body below.
Header and footer actions
Section titled “Header and footer actions”slot="header-actions" and slot="footer-actions" pin clusters to the end of each row.
footer-actions is responsive on its own: a right-aligned row when there is room, a full-width vertical stack when the card is narrow, via a container query. Author the primary action last so it sits at the row’s right and rises to the top of the stack.
Appearance
Section titled “Appearance”Horizontal
Section titled “Horizontal”Responsive
Section titled “Responsive”orientation="responsive" is horizontal when the card’s own container is wide enough and vertical when it is not, via a container query that is independent of the viewport, so a card collapses in a narrow sidebar or grid cell. The breakpoint is the collapse prop (a CSS length, default 28rem), because container-query breakpoints can’t be CSS variables.
An illustration, title, description, and CTA in the body; the × fires kai-dismiss.
Clickable
Section titled “Clickable”| Slot | Mode | Purpose |
|---|---|---|
| (default) | inject | The card body, below the header/media regions. |
| media | inject | Full-bleed media (image/video/illustration) at the top (vertical) or start (horizontal). Clipped to the card corners. |
| header | inject | Header content, e.g. a title. Rendered above the body. |
| header-actions | inject | An actions cluster pinned to the end of the header row. |
| footer | inject | Footer content rendered below the body. |
| footer-actions | inject | Action buttons pinned to the end of the footer. Do NOT combine with a clickable/href card (nested interactive). |
| Property | Type | Default | Notes |
|---|---|---|---|
| theme | "light" | "dark" | "auto" | 'auto' | Color mode (`auto` follows prefers-color-scheme). |
| appearance | "outlined" | "filled" | "plain" | "accent" | 'outlined' | Surface treatment: `outlined` (default) | `filled` | `plain` | `accent`. Attribute: `appearance`. |
| orientation | "vertical" | "horizontal" | "responsive" | 'vertical' | `vertical` (default, media on top), `horizontal` (media at the start), or `responsive`. |
| collapse | string | '28rem' | The card width below which a `responsive` card collapses to vertical and the footer actions stack. A CSS length; default `28rem`. Attribute: `collapse`. |
| dense | boolean | false | Tighter spacing for dense lists. Attribute: `dense`. |
| dismissible | boolean | false | Show a close (×) that hides the card and emits `kai-dismiss`. Attribute: `dismissible`. Off by default. |
| href | string | — | Render the whole card as a link. Attribute: `href`. Wins over `clickable`. |
| target | string | — | `target` for the `href` anchor. Attribute: `target`. |
| rel | string | — | `rel` for the `href` anchor. Attribute: `rel`. |
| clickable | boolean | false | Make the whole card a button (`role="button"`, Enter/Space, hover affordance) that emits `kai-card-click`. Attribute: `clickable`. Ignored when `href` is set. |
Composed from
Section titled “Composed from”This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.