[Accordion][base-ui] Vertical Accordion Alignment

[kirill-develops]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

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 🌈

https://codepen.io/alvarotrigo/pen/eYyOLvd https://codepen.io/alvarotrigo/pen/xxpKaXP

https://codepen.io/alvarotrigo/pen/jOYNvGP

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

[siriwatknp]

Labelled base to take this into consideration when building Accordion API

[kirill-develops]

Thanks, team!