Primitive contract

Card

Preserves the v0.0.2 Card API as a specialized grouped-content plane built on Surface styling rather than the default wrapper for every section.

Grouped information surface · @sanchika/primitives

Purpose and semantics

Preserves the v0.0.2 Card API as a specialized grouped-content plane built on Surface styling rather than the default wrapper for every section.

Recommended semantic: Use article, section, li, a, or another element matching the grouped content. Static cards are not focus targets.

Anatomy

root

The grouped content element.

heading

Visible label for the content group.

content

Finite variants and important states

Variant · tone: neutral, info, success, warning, danger
Variant · size: md, lg
Required states: default, focus-visible
Class hooks: .sk-card · .sk-tone-neutral · .sk-tone-info · .sk-tone-success · .sk-tone-warning · .sk-tone-danger · .sk-size-md · .sk-size-lg

Composed synthetic exemplar

Rendered state matrix

Card: 2 required states

Each specimen starts from the package-owned example and contract state inventory. Simulated pointer and focus frames are labelled; consumers still verify real interaction in context.

defaultSettled and available for its documented job.

Review record

…

focus visibleKeyboard focus remains explicit and independent of motion.

Review record

…

Accessibility and consumer responsibility

Keyboard and screen reader

Static Card is not focusable
Interactive Card uses native link or button semantics
Use a semantic heading where the group needs a label
Visible status text accompanies status tone

Consumer owns

Choose semantic grouping markup
Keep static cards out of tab order
Use LinkCard for a single navigation target

Mobile

Content and long identifiers wrap
Card remains within available inline size

Reduced motion and forced colors

No override is required.

A CanvasText boundary remains visible
Interactive focus uses Highlight

Compact API reference

Package: @sanchika/primitives
CSS: @sanchika/primitives/styles.css
Contract: primitiveSpecs.find((contract) => contract.name === "Card")
Primary class: .sk-card