Index Card File Rolodex Features Block for React

Each accordion item has a -mt-4 margin so it overlaps the previous card by one rem, and a shadow cast upward so the cards read as layers. The open card is lifted with z-10, a deeper shadow and a mb-4 margin, so the next card doesn't cover its foot. The open state is read with has-aria-expanded, which every target's trigger sets, so there is one set of classes for all of them.

Edit STUDIOS: each has a name, a contact and role, an email, a phone, a base and its services. The first studio is open on load; change the default value in the Accordion to open another, or to none.

Each strip is a button in a heading (the studio's name), with aria-expanded and the details in its panel. Only one card is open at a time, and Tab, Enter and Space work on every target.

The margin and shadow transitions are off. The panel's own height animation comes from the accordion: on Ark and Radix it respects the setting, while Base UI and React Aria still animate the height.

Yes. The cards are your card colour with a hairline, a ring and a shadow; avatars show initials in the foreground colour, and the services are outline badges. Nothing uses the primary colour.

The copy comes first, then the stack at the full width of the column behind a rule, with the same strips and the same open card. Long emails truncate rather than scroll.