UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Interaction Responsive Motion

Card and Panel Density Affordance

Cards represent objects, panels represent tools or context; they need different density and affordance.

cardspanelsaffordance

Design Principle

Clickable objects must be recognizable, while informational containers should not masquerade as buttons.

Principle Clickable objects must be recognizable, while informational containers should not masquerade as buttons.

Design action Clickable cards need hover/focus and a clear main link; tool panels need stable header, controls, and status area without decorative nested cards.

Examples Positive example: Resource libraries, knowledge lists, moderation queues, and detail sidebars. Counterexample: The whole card is clickable but lacks hover/focus.

Apply when Resource libraries, knowledge lists, moderation queues, and detail sidebars. Cards contain several sub-actions.

Source notes Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles.

Agent Directive

Clickable cards need hover/focus and a clear main link; tool panels need stable header, controls, and status area without decorative nested cards.

Apply When

  • Resource libraries, knowledge lists, moderation queues, and detail sidebars.
  • Cards contain several sub-actions.

Avoid

  • The whole card is clickable but lacks hover/focus.
  • Panels are nested into panels and hierarchy blurs.

Knowledge Metadata

Category
Interaction Responsive Motion
Quality
82%
Version
v1
Published
6/6/2026