@clickable-parent

At a glance

The community members are discussing the equivalent of Bricks Builder's .clickable-parent utility class in WebStudio, which makes an entire element, such as a card, clickable even if the link is only placed within the heading inside the card.

One community member suggests putting the card inside a link block and assigning the URL. Another community member shares a better approach, which involves setting the card to position: relative, adding a link inside the card, and then adding an element inside the link that is position: absolute and inset: 0, making the entire card clickable while the actual link is being clicked.

A community member has created an issue to track this feature request in the WebStudio repository.

Useful resources

JJesus Fonte

Hello everyone!

I’d like to know what it’s called in WebStudio, the equivalent of Bricks Builder’s .clickable-parent utility class, which makes an element, such as a card, fully clickable, even if the link is only placed within the heading inside the card.

Thanks!

4 comments

SSteve Suderman

I think you'd just put your card inside a link block. Assign the URL.

OOleg Isonen

I just recently saw a better way of doing it rather than putting entire card into a link, which I didn't know about

https://x.com/adamwathan/status/1897000764016631953

Essentially its:

set card to position relative
any link inside that card
add an element inside that link that is position absolute and inset: 0, so it takes the entire space of the card and makes it clickable, while the actual link is being clicked

OOleg Isonen

created an issue to track this https://github.com/webstudio-is/webstudio/issues/4967

JJesus Fonte

Yeeep, it works great. Thank a lot Oleg!

Add a reply

Join the Webstudio community

@clickable-parent