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

[MatteoDC (Matteo)]

Hello,

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

[AntonioBalderas]

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.

[NvdB31 (Nick)]

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.

[MatteoDC (Matteo)]

Thank you for the help!

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

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

[SidneyOttelohe]

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.

http://tech-magazine.webflow.io/course/ui-ux-design-mastery

[NvdB31 (Nick)]

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:
https://preview.webflow.com/preview/cloudrockets-stellar-site?preview=7692bbbed9b39c800f7659dd35bfe8cb