MiniCard

• Layer: Primitive
• Base: Custom — no Ark UI dependency

Static

Non-clickable cards

confluenceSprint retro Q1

2h ago

jiraRS-142 — Embed pipeline

yesterday

Clickable

When onClick is provided, the card gains cursor: pointer, tabIndex={0}, role="button", and focus ring styles.

Clickable — opens on click

confluenceSprint retro Q1

jiraRS-142 — Embed pipeline

Props

Prop	Type	Default	Description
children	JSX.Element	required	Card content
onClick	EventHandler	—	Makes the card interactive — adds cursor, tab stop, role, and focus ring

MiniCard vs Card

	MiniCard	Card
Structure	Flat — you provide the layout	Header / Body / Footer slots
Use case	Result rows, capture items, list entries	Standalone content units
Hover	bg.emphasized tone shift only	Same
Shadow	None	None
Padding	p: 3 (12px)	Varies per slot

Design notes

• Hover is bg.emphasized — a pure tone shift, no shadow. Plane 1 rule: no floating effects in the UI layer.
• Transition: background only, durations.fast with easings.organic.
• When onClick is present, the div gets role="button" and tabIndex={0} so it’s keyboard-accessible. The focus ring is the standard 4-layer glow from shadows.focus.
• Do not wrap MiniCard in another MiniCard — nesting clickable surfaces creates ambiguous interaction targets.

Plane 1 Constraints

• No drop shadows
• No gradients
• No glow on hover
• Background shift only on hover