Interaction design
Interactive cards need real elements
Why Gummy UI separates passive article cards, anchor cards, and button cards instead of attaching click and keyboard handlers to generic containers.
By Gummy UI · Published
Decide what the card does
A card can group information, navigate to another location, or trigger an in-place action. Those purposes have different HTML elements and expectations. Gummy Card exposes a passive article root, a link root, and a button root so the source communicates its intent before styling is considered.
This is clearer than making every card a focusable div and attempting to recreate Enter, Space, link destinations, button type, disabled behavior, and browser conventions. Native elements also give testing and assistive technology a reliable way to identify the interaction.
Avoid nested interaction traps
A whole-card link cannot safely contain another button or link as though each were independent. A button card should not wrap unrelated form controls. When a composition needs several actions, a passive card with explicit links and buttons inside is often the better structure, even if the visual design makes the entire surface feel connected.
The component API’s separate roots encourage that decision. Shared header, title, description, content, footer, and icon slots can be composed under the appropriate root without changing the material frame. Structure remains an application choice rather than a CSS side effect.
Keep focus attached to the action
Interactive card roots receive visible focus and native activation. The SVG frame and reservoir are decorative, so focus remains on the anchor or button rather than moving into a graphic. Selected visual state is separate from keyboard focus; one describes application state and the other identifies the current input target.
Responsive content can change the card’s height and frame geometry. The source measures its decorative SVG without changing the semantic root. If ResizeObserver is unavailable, the frame has a stable initial geometry while the card content remains readable and interactive.
Test each root as itself
Passive card tests should confirm article semantics and the absence of synthetic interaction. Link tests should use navigation attributes and link queries. Button tests should cover native button behavior, type, focus, and activation. A shared visual snapshot cannot prove all three contracts.
The component detail page and source viewer expose these roots together because they share anatomy. That does not make them interchangeable. Choosing the correct root is the central accessibility and product decision; the Gel Pop frame is the common surface that follows it.