shadcn.io is not affiliated with official shadcn/ui
Index Card File Rolodex Features Block for Svelte
A wallet-style stack of five studio contact cards built on a single-open Accordion: the cards overlap so only each title strip shows, and opening one slides it forward and reveals its details.
Installation
Overview
An index card file features section for Svelte with Ark UI. A split with a hairline divider: on the start side a compact heading and three short points, sticky on wide screens; on the end side a wallet-style stack of five studio contact cards for a contacts tool. The cards overlap, so only each card's title strip shows (an avatar, the studio and who to ask for), and opening one slides it forward with a deeper shadow and reveals its email, phone, base and services while the cards beneath step down. It's built on Accordion, so it is a real single-open disclosure group, with Avatar, Badge and Guides, and your theme's tokens for every colour. For directories, team and contact lists and any set of records that earn a detail view.
FAQ
How do the cards overlap?
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.
How do I change the contacts?
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.
Is it accessible?
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 arrow keys, Home and End move between the strips as well.
What happens with reduced motion?
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.