Card

Content container with optional media slot and interactive mode.

Preview

Loading preview…

Import

// Web Component
import '@kittl/ui';

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

Usage

Web Component

<kittl-card bordered>
  <img slot="media" src="https://example.com/thumb.jpg" alt="Preview" />
  Card content goes here.
</kittl-card>

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

React

<Card bordered>
  <img slot="media" src="https://example.com/thumb.jpg" alt="Preview" />
  Card content goes here.
</Card>

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

Props

Property	Type	Default	Description
bordered	boolean	false	Show border
interactive	boolean	false	Enable click behavior
active	boolean	false	Active/selected state
disabled	boolean	false	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