Streaming live at 10am (PST)

Help building vertical design line


#1

Hi all,

I’m trying to build a vertical line with different bullets on top of it, with text centered for each bullet.

Any got a tip/trick on how I can solve this? :slight_smile:

This is the design I’m trying to achieve:

Thank you!

Kind regards
Tobias


#2

It depends how your structure must be. Basically 2 structures: either there’s 1 element for all the bullets, or 4 elements with each bullet + title and text.

In any way, your line can be a 1px div with bg color or a border. It can also be a 1pc png repeated vertically and centered, behind the bullets.


#3

Vincent nailed it. You could put margins above and below it to hide the ends under the bullet circles. You’ll get into trouble if the last bullet text gets too long, though, revealing the end of the div line.


#4

Here you go :grinning:
https://forum-74067.webflow.io/

Read only
https://preview.webflow.com/preview/forum-74067?utm_source=forum-74067&preview=c2fc702cf435a21dfb97d954b6369d9a

Hope it helps :blush:


#5

Hmm, i see a problem in my approach. The content must be the same height here.


#6

On the same page I made one with Collections. Added a Switch which you turn on for the last item that way you can control the last vertical line.

Again, hope it helps :blush:


#7

Awesome job @jorn

I marked it as an answer, but I wont close the topic just yet. So if someone has any doubt, we can continue the discussion.


#8

Thank you so much for your help Jorn!

Kind regards :slight_smile:


#9

Here you go. The ideal way to structure this thing properly. It is content independent. It is quick and dirty of course but you will see what I did anyway.