Skip to content

kit-card

<kit-card>
  <h3 slot="header">Note 1</h3>
  <p>Body text.</p>
  <small slot="footer">Updated today</small>
</kit-card>

<kit-card> is a styled container. It provides three slots, applies theme tokens for background, border, padding, and radius, and supports an interactive mode for clickable cards.

Package

@atheory-ai/kitsune-ui

import '@atheory-ai/kitsune-ui'
import { KitCardElement } from '@atheory-ai/kitsune-ui'

Attributes

Attribute	Type	Default	Notes
`interactive`	boolean	`false`	Adds hover/active/focus styling. Reflects.

The element doesn’t take focus by itself when interactive. Add tabindex="0" and role="button" if you want a keyboard-activatable card — or wrap the body in a real <button> for the most-accessible variant.

Slots

Slot	Purpose
`header`	Title and any header content. Bold by default.
(default)	Card body.
`footer`	Footer with a top border and reduced spacing.

CSS custom properties

Property	Default
`--kit-color-surface`	`Canvas`
`--kit-color-border`	`CanvasText`
`--kit-color-text`	`CanvasText`
`--kit-color-accent`	(theme)
`--kit-radius-md`	`0.5rem`
`--kit-space-2`	`0.5rem`
`--kit-space-3`	`0.75rem`
`--kit-focus-ring`	`Highlight`

Examples

Static card

<kit-card>
  <h3 slot="header">Welcome to Quill</h3>
  <p>A small notes app, built without React.</p>
  <small slot="footer">Updated today</small>
</kit-card>

Interactive card with metadata

<kit-card
  interactive
  tabindex="0"
  role="button"
  meta-event="note.opened"
  meta-prop-id="n_42"
>
  <h3 slot="header">Design tokens</h3>
  <p>Components should consume CSS custom properties.</p>
</kit-card>

Click anywhere on the card → note.opened event with the note id.

Custom theme

kit-card {
  --kit-color-border: oklch(85% 0 250);
  --kit-radius-md: 0.75rem;
}

Accessibility caveats

A kit-card[interactive] does not implement keyboard activation by itself. Add tabindex="0", role="button", and a keydown handler that fires the click — or, more reliably, wrap the slot content in a real <button>:

<kit-card>
  <button class="card-button" data-meta-event="note.opened" data-meta-prop-id="n_42">
    <h3 slot="header">Design tokens</h3>
    <p>...</p>
  </button>
</kit-card>

For long lists of cards, prefer the button-wrapped variant. Screen readers and keyboard users navigate buttons cleanly; ad-hoc role-button divs less so.

See also