Streaming live at 10am (PST)

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


#1

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


#2

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.


#3

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.


#4

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?


#5

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


#6

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


#7

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