Ana Beltrán
Arquitecta
+34 611 204 310
Contactos
1 / 6
HTML + CSSCards
Rotary contact file
A Rolodex of index cards that flip over its rod with the mouse wheel, the arrow keys, a swipe or the buttons.
Settings
16px
1x
Code
<section class="uvq07-rdx" aria-label="Contacts"><p class="ti">Contacts</p><div class="dr" tabindex="0" aria-roledescription="card file" aria-label="Use the arrow keys to flip cards"><article style="--i:0;--d:0;z-index:20"><span class="tb" aria-hidden="true">A</span><h3>Ana Beltrán</h3><p>Architect</p><p class="ph">+34 611 204 310</p></article><article style="--i:1;--d:1;z-index:19" aria-hidden="true"><span class="tb" aria-hidden="true">B</span><h3>Bruno Cano</h3><p>Photographer</p><p class="ph">+34 622 870 115</p></article><article style="--i:2;--d:2;z-index:18" aria-hidden="true"><span class="tb" aria-hidden="true">C</span><h3>Carla Díaz</h3><p>Editor</p><p class="ph">+34 633 512 908</p></article><article style="--i:3;--d:3;z-index:17" aria-hidden="true"><span class="tb" aria-hidden="true">D</span><h3>David Esteve</h3><p>Carpenter</p><p class="ph">+34 644 391 276</p></article><article style="--i:4;--d:4;z-index:16" class="far" aria-hidden="true"><span class="tb" aria-hidden="true">E</span><h3>Elena Ferrer</h3><p>Lawyer</p><p class="ph">+34 655 128 734</p></article><article style="--i:5;--d:0;z-index:30" class="pa" aria-hidden="true"><span class="tb" aria-hidden="true">F</span><h3>Fran Gómez</h3><p>Cook</p><p class="ph">+34 666 047 652</p></article><i class="rod"></i></div><div class="ct"><button type="button" class="pv" aria-label="Previous card"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 15l6-6 6 6"/></svg></button><span class="ix" aria-live="polite">1 / 6</span><button type="button" class="nx" aria-label="Next card"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></button></div></section>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
See all CardsWhere to use it
The desk Rolodex is a great metaphor for browsing people one at a time. Each ruled index card has a colored tab, the cards behind fan back in perspective, and the front one flips forward over the steel rod when you move on. Wheel, keyboard, touch swipe and buttons all work. Use it for team directories, CRM widgets, supplier lists or author pages.
The main and second colors alternate on the tabs and the ruled header line. Replace the six contacts with your own, keeping one line for the role and one for the phone.