Streaming live at 10am (PST)

How do I create a list with call to actions and a more complex design?


I am working on a website and I have to create a list which looks like that

It should be composed by the article’s number on the left, the name of the article, and then on the far right there is a call to action.

The problem is that I don’t really know how to manage to pull-out that result.
This is what I have been able to create so far

If I try to add a left-border to the list item, I will get a too small margin for the right side of the number

Thank you for the help

You need use custome code to target the numbers via pseudo-elements, there’s a few example on codepen
also you can try div´s inside list items or maybe columns.

You should use one div block for every row.
In that div block you can either:

  1. Use columns
  2. Use three separate divs which you give a width manually, and apply float: left to each of them.

That’s about it.

Thank you for the help!

Thank you for the help, but on Webflow you can’t add divs inside list items. Do I have to code that manually?

I like these ideas, but as I said before, do I have to code it manually?

I’ve created something similar a while ago so it can definitely be done and without any custom code, this list is being pulled from a cms collection.

You don’t have to fiddle around with custom code, if that’s what you mean.

I made it for you. You can check it here:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.