I’m running into an issue when linking Cards that I’ve created, for example when I want to link them to my blog posts.
In my case, I’d like the entire card (image, content, etc.) to be clickable and link to the corresponding blog post. At the same time, I also have a category button or text inside the card that I want to link to the relevant category.
However, as soon as I add additional links inside the card, the card layout no longer displays correctly.
Please see the screenshots and project file for reference.
Is this the wrong approach on my side, or is this simply not possible at the moment? Or do you have an alternative solution that would allow this to work?
You’re right that you can’t nest links, but you can fake the behaviour with layering.
The basic idea is:
Remove the main link from the Card itself
Don’t wrap the whole Card in a Link component.
Add a full-size “overlay” link inside the Card
Add a new component as the first child inside the Card (a Flex or Box works well).
Set it to:
position: absolute
top: 0; right: 0; bottom: 0; left: 0
Give this overlay the link to the blog post.
This effectively makes the whole card clickable.
Make the Card a positioning context
Set the Card itself to position: relative so the absolute overlay is contained within it.
Layer interactive elements above the overlay
For your category button/text, set:
position: relative
a higher z-index than the overlay (for example z-10)
This ensures clicks on the category go to its own link, not the card link.
Optional: pointer-events fine-tuning
If needed, you can disable pointer events on parts of the overlay and re-enable them on buttons, but usually z-index alone is enough.
In short: one absolute, full-size link for the card + smaller, higher-z links on top for categories or buttons. This avoids invalid HTML while giving you the UX you want.
