Dynamic Styling for Collection List (CMS)

Hi Webflow!

I have created a chart like the one below, but I would like to create the same chart using CMS via a “Collection List” item.

However, I cannot wrap my head around how to build out the CMS to include varying background colors for each list item.

Is this possible?

Thanks in advance!

Here is my site Read-Only. Please reference mobile view and the “Compatibility Chart” draft page: https://preview.webflow.com/preview/hydrasmart-rates-app?preview=2a0177609301505174be85707e87685a

It’s supported by Webflow and fairly easy.

In the adequate collection, add a color field. (adequate means in the categories it you want to color items by categories, or in the items collection if you want to color them independently)

Then add colors to the items.

Now when inside a collection list or a page template, when selecting an element, switch to the Settings tab. You’ll see you can use a dynamic color for backgrounds, borders or texts. (That’s also where you can define a dynamic background image).

Select the one you want then chose the field to bind.

1 Like