Card

Content container with optional media slot and interactive mode.

Import

import '@kittl/ui';

import { Card } from '@kittl/ui-react';

Usage

<kittl-card bordered>
  <img
    slot="media"
    src="https://picsum.photos/seed/kittl/320/180"
    alt="Preview"
  >
  Card content goes here.
</kittl-card>

<kittl-card interactive> Click this card </kittl-card>

import { Card } from '@kittl/ui-react';

/** Basic Card usage, rendered live on the docs site. */
export const CardUsage = () => (
  <>
    <Card bordered>
      <img
        slot="media"
        src="https://picsum.photos/seed/kittl/320/180"
        alt="Preview"
      />
      Card content goes here.
    </Card>

    <Card interactive onCardClick={() => console.log('clicked')}>
      Click this card
    </Card>
  </>
);

Props

Property	Attribute	Type	Default	Description
bordered	bordered	boolean	false	Show border
interactive	interactive	boolean	false	Enable click behavior
active	active	boolean	false	Active/selected state
disabled	disabled	boolean	—	Disable interaction

Slots

Slot	Description
media	Top media area (image, video, etc.)
(default)	Card body content

Events

Event	Detail	Description
card-click	—	Fired when an interactive card is clicked

React prop: onCardClick

Accessibility

• When interactive, the card gets role="button" and tabindex="0"
• Keyboard: Enter triggers click