Contactos

Ana Beltrán

Arquitecta

+34 611 204 310

1 / 6
HTML + CSSKarten

Drehbare Kontaktkartei

Ein Rolodex aus Karteikarten, die per Mausrad, Pfeiltasten, Wischgeste oder Buttons über die Achse kippen.

Einstellungen

16px
1x

Code

<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>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Karten

Alle ansehen: Karten

Wofür du ihn nutzen kannst

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.