Component registry

Kit card

One content object with media, title and context.

All components · Kit documents · Definition as JSON

Live web demo

Web source: openvibe-shared/kit · kit.card({ title, href, image, badge })

Anatomy

  • mediapreview or glyph
  • titleprimary name
  • metasupporting facts

Props

title
string
href
url
image
url?
badge
string?

Behavior and accessibility

States
default · hover · focused · loading
Tokens
color.bg.raised · color.text.primary · radius.md
Keyboard
Standard focus order
Outside tap
No dismissal
Scroll lock
Page remains scrollable
Reduced motion
Remove movement; keep the state change.
Accessibility
The whole card is one link named by its title. Visible keyboard focus; follow reading order. At least 44 × 44 dp or pt for every touch action.

Android · Jetpack Compose

Reference: OvCard in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use Card with a single onClick and semantic title.

Material 3 container: SurfaceContainer

iOS · SwiftUI

Use a Button wrapping a card-shaped VStack.

Example definition

{
  "schema": "design.component@1",
  "name": "kit-card",
  "props": {
    "title": "Seattle at night",
    "href": "/live"
  }
}

Other components