Component as a link

Design help CMS
1

Hello,

I created a tile card as a component to use as links to blog posts, however I can’t seem to link each instance independently to each blog post

Obviously since it’s a component the destination link changes everywhere.

I would like each instance to link to a different page without having to unlink it

Screenshot 2024-08-07 at 17.11.26
Screenshot 2024-08-07 at 17.11.26758×706 24.7 KB

https://preview.webflow.com/preview/hucha-wip?utm_medium=preview_link&utm_source=designer&utm_content=hucha-wip&preview=38b6170fe6f1bc4d0d892653b735ac7f&locale=en&workflow=preview

Here is my public share link: LINK
(how to access public share link)

2

At a glance it looks setup correctly, where are you having problems?

  • You have a link block in your component
  • The link is exposed as a property
  • The property is bound to the containing collection list

In your staging site, this setup links your tiles to each blog post individually.

image
image1119×758 105 KB

3

Ah yes! One last minute attempt late at night and managed to solve it.

I had to add another link property separately rather than the link block itself and then could link it to the CMS

Thanks for having a look though!

4

I have another question though,

Now that I have figured out the linking issue with the component, I’d like to know if there is a way to have a colour change on the text on hover depending on the chapter. for example chapter 1 tiles to orange, chapter 2 tiles to yellow etc

Right now changing the interaction changes all the tiles and the only other way I can think of is duplicating the actual component and interactions

Thanks

5

Hey Diego, missed your question.

Yes, but unfortunately components don’t explicitly have style support yet, so it’s a bit of a hack.

I’d probably approach it like this;

  • Replace the outer div of your component with a custom element. Make it a DIV. Add a custom element property of “style”.
  • Then data-bind that style element to a component property named “Style”. That way you can just define a style string for each instance, and it will apply to that outer DIV.
  • In the CMS, add a Style text field
  • Data-bind your component’s Style property to that CMS field.

Now in the CMS you can do whatever styling you want to your item-bound component instances, e.g.

color: red; would make inheriting text red

color: purple; background-color: yellow would add color to the background of your div also

How you’ve setup your inner elements will matter, for example if you set a color to your text element inside of the component, it won’t inherit the color from the parent DIV.