Studio
Studio/Kits
New kit
Canonical inventory
Hardware · specialized

Device card

hardware.device-card

Device card: A software representation of a physical device, state, or tactile control.

device cardthe device controlthe hardware-style indicator
States5
Touch target44px
Evidence6
Introduced by2 kits
Visual specimen

Same contract. Every kit voice.

DEVICEDevice cardOnline · 74%
MAVAN renderingdefault
Translation table

What code calls it.

Webcustom controlThis component is composed from multiple web primitives.pattern
ARIAmeter or sliderNo single ARIA role represents the complete component.pattern
SwiftUICustom View compositionSwiftUI has no single direct equivalent; compose and name the behavior explicitly.approximation
AppKitCustom NSView compositionAppKit has no single direct equivalent; use a custom view or controller composition.approximation
Anatomy

Every part, named.

  1. 1Device frame
  2. 2Value or state indicator
  3. 3Physical affordance
  4. 4Keyboard or pointer control
Often confused with

Similar shape. Different contract.

Battery indicatorhardware.battery

Shares a visual family, but has a different role, state model, or interaction contract.

Detent dialhardware.detent-dial

Shares a visual family, but has a different role, state model, or interaction contract.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Device card component (hardware.device-card). Device card: A software representation of a physical device, state, or tactile control. Support these states: default, hover, focus-visible, active, disabled. Use semantic design tokens rather than raw visual values. Preserve a minimum 44px touch target where interactive. Provide and verify: implementation, state-matrix, responsive, keyboard, touch, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.
Studio contract

What must be proven.

Required states

default · hover · focus-visible · active · disabled

Required evidence

implementation · state-matrix · responsive · keyboard · touch · reduced-motion

Source union

jade · mavan