Use Webflow's Embed Component to add elements with a unique class inside of CMS Items in a Collection list

The example below shows how to create a different colored :hover state for each CMS Item in a Collection List, based on a color field of that Collection.

There's one unique color field in the Collection, it's used as an accent color for the titles of the cards, and in a faded version for the :hover state.

Demo Hover over the Collection List of cards below: there's a different :hover color for each of the CMS items.

You can clone this entire website in your Webflow account from the project page, then inspect this page to see how it's built, or you can read about the building details below.


We use an Embed Component to add HTML and CSS Custom Code inside of the Link Block of the CMS Item.
Using HTML, we add a div, and we use a dynamic field to declare a class for it. Here we target the Slug CMS field, as a slug is almost always eligible to be a class name (just dont start the slug with a digit, it has to be a letter).
Using the Slug as a class name, we make sure that the div has a unique class, in each of the CMS Items.
Using CSS code, we add styling properties to the div: it expands all the way inside of the Embed Component div using width and height, and it gets a semi-transparent white layer using linear-gradient, in order to tame the color we will display on :hover, giving just a hint of the accent color used by the title and the image above.
We then add the background-color property, set to the dynamic color field from the CMS collection, on the :hover state of the same div.
As the dynamic fields has to somehow be processed, the results of the custom code can't be seen in design mode. To test it, you have to click on Preview.
Here is the structure used for the Collection List and the Collection Item
The Embed Component contains the following code.
❮❯ code


Meet me on Twitter if you come up with other use cases using this technique.
Text Link