Ana Beltrán
Arquitecta
+34 611 204 310
Contactos
Arquitecta
+34 611 204 310
Ein Rolodex aus Karteikarten, die per Mausrad, Pfeiltasten, Wischgeste oder Buttons über die Achse kippen.
<section class="uvq07-rdx" aria-label="Kontakte"><p class="ti">Kontakte</p><div class="dr" tabindex="0" aria-roledescription="Kartei" aria-label="Mit den Pfeiltasten blättern"><article style="--i:0;--d:0;z-index:20"><span class="tb" aria-hidden="true">A</span><h3>Ana Beltrán</h3><p>Architektin</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>Fotograf</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>Lektorin</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>Schreiner</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>Anwältin</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>Koch</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="Vorherige Karte"><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="Nächste Karte"><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>Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Das Rolodex auf dem Schreibtisch ist eine schöne Metapher, um Personen einzeln durchzublättern. Jede linierte Karteikarte hat einen farbigen Reiter, die hinteren fächern sich perspektivisch nach hinten auf, und die vordere kippt beim Weiterblättern über die Stahlachse nach vorn. Mausrad, Tastatur, Wischen und Buttons funktionieren. Gut für Teamverzeichnisse, CRM-Widgets, Lieferantenlisten oder Autorenseiten.
Haupt- und Zweitfarbe wechseln sich auf den Reitern und der Kopflinie ab. Ersetze die sechs Kontakte durch eigene, mit einer Zeile für die Rolle und einer für die Telefonnummer.