Summary 💡
Essentially your current accordion components but aligned vertically. The use cases are endless but an example would be a hero panel with an open accordion and as you click on the other accordions to expand, the open one shuts. Another use would be to have a horizontal list of cards with one open, and as you hover over the adjacent cards they expand.
I've provided multiple examples below:
example 1: hero bar implementation. features to add: click to expand or maintain expansion. after expansion becomes interactable in the case there are buttons or links and so on.
example 2: similar to above but in a card version
example 3: basic written style. the vertically aligned text is great addition
Examples 🌈
Motivation 🔦
Building a dynamic page for travel location booking forms. My vision is to have a giant hero photo of the location with two vertical accordions on the right-hand side. the first accordion is the details of the location that expands halfway and shrinks the photo to 50%. the second accordion is the booking form that collapses both the image and details to the left
Summary 💡
Essentially your current accordion components but aligned vertically. The use cases are endless but an example would be a hero panel with an open accordion and as you click on the other accordions to expand, the open one shuts. Another use would be to have a horizontal list of cards with one open, and as you hover over the adjacent cards they expand.
I've provided multiple examples below:
example 1: hero bar implementation. features to add: click to expand or maintain expansion. after expansion becomes interactable in the case there are buttons or links and so on.
example 2: similar to above but in a card version
example 3: basic written style. the vertically aligned text is great addition
Examples 🌈
Motivation 🔦
Building a dynamic page for travel location booking forms. My vision is to have a giant hero photo of the location with two vertical accordions on the right-hand side. the first accordion is the details of the location that expands halfway and shrinks the photo to 50%. the second accordion is the booking form that collapses both the image and details to the left