Skip to content

Improve clickability feedback for resource cards #116

@luis-sagx

Description

@luis-sagx

Problem:

Currently, the resource cards on the main dashboard (e.g., "Fantastic CRUD UI," "Advanced Search") provide minimal visual feedback to indicate they are interactive and clickable. The only current indicator is a cursor change to a pointer on hover. This lacks sufficient affordance, which can lead to a poor user experience and make the navigation feel less intuitive.

Solution:

Enhanced the visual feedback for these interactive cards to make their tappable/clickable state more obvious. This was achieved by implementing a subtle but clear visual transformation on hover/focus.

Changes Made:

  • Added a slight scale transform (e.g., scale(1.02)) on hover to give a "lifting" effect.
  • Applied a subtle background color or shadow change on hover to further distinguish the card from the static background.
  • Ensured focus states are styled for accessibility when navigating via keyboard.

Result:

The cards now provide a clear and modern visual cue that they are interactive elements, significantly improving the perceived usability and user confidence.

Screenshot:

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions