Step-by-step process with vertical orientation

[Chq]

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

This is similar to what I’m thinking of:

Thanks

[twinsticks]

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 and used the gradient tool on the div

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

[twinsticks]

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…

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

[twinsticks]

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

[Chq]

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.