Streaming live at 10am (PST)

Numbered ordered Collection-list

Hey Webflow Community,

maybe you can help me and I hope you understand my english. :blush:

I try to build a top-list, depends on a rating. I have a blog about boardgames, the articles comes from a collection. Any boardgame has a rating. Now I want a ordered list of these.

  1. boardgame x with 89 points
  2. boardgame y with 80 points
  3. boardgame z with 75 points

Now comes a new boardgame with 83 points and I want a automatic update of these list.

  1. boardgame x with 89 points
  2. new boardgame with 83 points
  3. boardgame y with 80 points

How I sort the collection-list is clear, but I dont know how bring this in a numbered ordered list.

I hope that is clear what I want and maybe you have an idea.

Thanks for help!

1 Like

I suggest reviewing the number field in a collection. Options to sort a collection by number exists.

Thanks for your answer. But I have no problem with the sorting. That works fine. I have a problem to display the NUMBER of the place, like an “ordered List”. I have not found a function in the number field that helps me.


Please share a read-only link to your site.

Here is the link:

See “Top 100”-Page.


Can you please explain this in more detail? I don’t understand what you mean by “NUMBER of the place”.

Sorry! :disappointed_relieved:
Maybe its more clear in a picture…

Thanks for your patience! :slight_smile:

I got it. So the issue is this; while a collection list is referred to as a list, you can’t drop the collection into a list element. Good news is that you can treat any element as a list item with CSS.

So custom code to the rescue. It’s not really custom code it’s just plain CSS. But you need to add it to your page “top100”. So looking at your code, the collection list is .collection-list and your collection items are . top100item; the custom code below will style the collection list as a ordered list and each item a list item.

// class below is your collection list
.collection-list {
    list-style-type: decimal;
// class below is your cms item
.top100item {
    display: list-item;
    color: white;

That should give you the results you want. You can always refine the CSS to get the final design look.


Great! It works.
Thanks for your support!!! :grin:

Hi WebDev,

Thank for sharing this.
I’m guessing that this is for an ordered list. What would be the code for an unordered list?

Do I have to change it to “Circle”?

I suggest reviewing the list-style-type property at MDN.


Thanks a lot.

So for bullet point I need to use the “disc” style type.

How did you check if it working?

Well, visually you should see whatever element you defined as a list-item (the parent) with its children displaying the list-style-type you specified.

You should probably share your published URL so someone can view it.

Hi @webdev and @Gazpod, thank you guys for this solution - it works but I wonder how I can move the resulting rank number around. For example, by default it sits on top of every collection list item. But I want to move it inside to where it says “rank #”. I want to replace the “#” with the collection item number that currently still sits outside on top of it.

Any help and support is highly appreciated!