How to create this kind of card bar?

Design help General
1

Hello

I have recently started using Webflow and am designing a website for a company. I want to describe their products features like Payfit does on their website with these cards you click on. However , instead of the “<” used, i want to put circles that get bigger when you click on them and with a faded text whenever it is unclicked (as shown in the image below).

I don’t know what this is called so I can’t find any tutorials. Any tips on how i can create it?

Inspiration

Screenshot 2023-05-06 at 17.53.33
Screenshot 2023-05-06 at 17.53.331920×1200 94.9 KB

Objective

Screenshot 2023-05-06 at 17.57.23
Screenshot 2023-05-06 at 17.57.23900×740 97.2 KB

Thanks a lot

2

The UX element in Payfit is most commonly referred to as an accordion, because you see all of the headers, but the content expands/collapses as headings are clicked.

Sounds like you’re looking to build that, but with expanding bullets as some eyecandy.

Google “webflow interactions accordion”, that should steer you in the right direction.

4

Thanks for your help! i’ll give it a look