Join the Webstudio community

Updated 2 months ago

@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
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!
S
O
J
4 comments
I think you'd just put your card inside a link block. Assign the URL.
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:
  1. set card to position relative
  2. any link inside that card
  3. 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
Yeeep, it works great. Thank a lot Oleg!
Add a reply
Sign up and join the conversation on Discord