Ana Beltrán
Arquitecta
+34 611 204 310
Contactos
Arquitecta
+34 611 204 310
Un Rolodex de fiches qui basculent autour de leur axe avec la molette, les flèches, un glissement ou les boutons.
<section class="uvq07-rdx" aria-label="Contacts"><p class="ti">Contacts</p><div class="dr" tabindex="0" aria-roledescription="fichier" aria-label="Utilise les flèches pour tourner les fiches"><article style="--i:0;--d:0;z-index:20"><span class="tb" aria-hidden="true">A</span><h3>Ana Beltrán</h3><p>Architecte</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>Photographe</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>Éditrice</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>Menuisier</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>Avocate</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>Cuisinier</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="Fiche précédente"><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="Fiche suivante"><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>Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Le Rolodex de bureau est une belle métaphore pour parcourir des personnes une à une. Chaque fiche lignée porte un onglet coloré, celles de derrière s'ouvrent en éventail en perspective et celle de devant bascule vers toi par-dessus la tige en métal quand tu passes à la suivante. Molette, clavier, glissement et boutons fonctionnent. Pour annuaires d'équipe, widgets CRM ou listes de fournisseurs.
Les deux couleurs alternent sur les onglets et la ligne d'en-tête. Remplace les six contacts par les tiens, avec une ligne pour le métier et une pour le téléphone.