Step-by-step process with vertical orientation

New here, how would I build a step-by-step process with vertical orientation?

This is similar to what I’m thinking of:


Hey, nice design.

I am sure it is possible to get that 100%… I spent 5min and got this close:

I am just not sure on the connecting lines (or how important they are)

I did it with cards and columns, there might be better approaches… I am still working it all out.

I read up on some French :wink: and used the gradient tool on the div

So yeah, with some time I think you could get there.

So I got a bit closer with the lines… I put a div with a border right between each card and played with the padding and margins.

Just noticed the shadow, which is also possible…
Screenshot 2023-05-18 at 8.35.20 PM

So yep, you can do it… and with time or the right person you can do anything you see anywhere else on the web

1 Like

So it looks like it works for static data… might need some adjusting for dynamic data (pulling options from a DB)

Wow, looks great! Thanks for the insights and work you put into solving the issue. I was thinking it would need to be done in vue.js or some other language. Looks like using cards is a good solution.