Use custom code and the Slug dynamic field to add elements with a unique class inside of CMS Items in a Collection list

You can use the Slug field in an Embed Component, to create and style elements with unique classes.

Useful to, for example, introduce variations in your Collection Lists — e.g. bind the :hover state background-color of a CMS item to a color field of its Collection.

https://dl.dropboxusercontent.com/s%2Fdn7ckwq0u9sf0lj%2FWebflow%2520Secrets%25202-12%2520screenflow.mp4

The clonable demo + tutorial is here: https://sbx.webflow.io/custom-hover-color-for-cms-items-in-a-list…

The principle, in one image below.

The Slug field is almost ideal for that usage, because it can’t contains spaces & exotic characters — with one exception: it won’t work if the Slug starts with a digit.

Share your ideas around this technique! You can of course craft special fields for that usage.

1 Like

This is great, thanks for the write-up @vincent—it’s cool little implementations like this that make Dynamic Fields one of my favorite Webflow features.

Hey @vincent, it’s been a long day and my brain’s struggling to understand the difference with this:
Screenshot 2020-08-05 at 21.56.29