How to Make an Entire Card Clickable in Webflow with Finsweet Mirror Click

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to duplicate a click event from one element to another in Webflow with Finsweet Attributes Mirror Click.

Understanding the use case

Mirror Click lets you trigger the click on element B when the user clicks on element A. The most common use case: clicking a custom area, like an entire card or an image, to trigger a link or hidden button that Webflow doesn't let you target directly.

1. Add the script to the head

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-mirrorclick@1/mirrorclick.js" defer>script>

2. Define the source/target pair

On the trigger element (for example, the entire card), add:

• fs-mirrorclick-element="trigger"
• fs-mirrorclick-group="card-1"

On the target element (for example, the hidden link), add:

• fs-mirrorclick-element="target"
• fs-mirrorclick-group="card-1"

3. Using it in a Collection List

In a Collection List, you don't need to name each group individually. Finsweet automatically pairs each trigger with the target in the same CMS item. Just use the element="trigger" and element="target" attributes without the group attribute.

Conclusion

Mirror Click is essential for clickable cards in Webflow. Use cases:

• Fully clickable blog cards
• CMS list items with an extended click area
• Triggering a modal from an image