Tabs als steinerner Arkadengang
Ein steinerner Arkadengang mit vier Bögen: Durch den gewählten fällt die Sonne, zeichnet seine Form auf den Boden und wandert beim Wechsel mit.
Einstellungen
Code
<div class="uvq12-ar"><div class="pt" role="tablist" aria-label="Architektur"><button type="button" role="tab" id="uvq12-ar-t0" aria-selected="true" aria-controls="uvq12-ar-p0" tabindex="0"><span class="fz">Studio</span><span class="op" aria-hidden="true"></span></button><button type="button" role="tab" id="uvq12-ar-t1" aria-selected="false" aria-controls="uvq12-ar-p1" tabindex="-1"><span class="fz">Bauten</span><span class="op" aria-hidden="true"></span></button><button type="button" role="tab" id="uvq12-ar-t2" aria-selected="false" aria-controls="uvq12-ar-p2" tabindex="-1"><span class="fz">Team</span><span class="op" aria-hidden="true"></span></button><button type="button" role="tab" id="uvq12-ar-t3" aria-selected="false" aria-controls="uvq12-ar-p3" tabindex="-1"><span class="fz">Kontakt</span><span class="op" aria-hidden="true"></span></button></div><div class="fl" aria-hidden="true"><span class="sun"></span></div><div class="pn" role="tabpanel" id="uvq12-ar-p0" aria-labelledby="uvq12-ar-t0">Architektur und Sanierung seit 1998.</div><div class="pn" role="tabpanel" id="uvq12-ar-p1" aria-labelledby="uvq12-ar-t1" hidden>Dreißig Gebäude in sechs Städten.</div><div class="pn" role="tabpanel" id="uvq12-ar-p2" aria-labelledby="uvq12-ar-t2" hidden>Neun Leute zwischen Madrid und Porto.</div><div class="pn" role="tabpanel" id="uvq12-ar-p3" aria-labelledby="uvq12-ar-t3" hidden>Calle del Prado 14. Wir freuen uns auf dich.</div></div>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.
Mehr aus Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Tabs, gebaut wie ein klassischer Arkadengang aus Travertin: Die Namen sind in den Fries gemeißelt, und jeder Bogen ist ein Tab. Der gewählte öffnet sich zu einem hellen Himmel, die anderen bleiben im Schatten der Loggia, und ein Sonnenfleck in Bogenform gleitet über den gefliesten Boden. Passend für Architekturbüros, Hotels, Museen und Immobilienseiten.
Die Hauptfarbe bestimmt das Sonnenlicht, die Zweitfarbe den Stein. Vier Bögen wirken am besten; halte die gemeißelten Namen bei einem Wort und nutze das Feld darunter für einen kurzen Satz pro Bereich.