Stone arcade tabs
A stone arcade with four arches: the chosen one lets the sun through and its shape slides across the floor when you switch.
Settings
Code
<div class="uvq12-ar"><div class="pt" role="tablist" aria-label="Architecture"><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">Works</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">Contact</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">Architecture and restoration since 1998.</div><div class="pn" role="tabpanel" id="uvq12-ar-p1" aria-labelledby="uvq12-ar-t1" hidden>Thirty buildings in six cities.</div><div class="pn" role="tabpanel" id="uvq12-ar-p2" aria-labelledby="uvq12-ar-t2" hidden>Nine people between Madrid and Porto.</div><div class="pn" role="tabpanel" id="uvq12-ar-p3" aria-labelledby="uvq12-ar-t3" hidden>Calle del Prado, 14. Come and see us.</div></div>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 Navigation
See all NavigationWhere to use it
Tabs built like a classical arcade in travertine: names are carved into the frieze and each arch is a tab. The chosen arch opens onto a bright sky while the others stay in the shade of the loggia, and a patch of sunlight in the shape of the arch slides across the tiled floor. It suits architecture studios, hotels, museums and property sites.
The main color sets the sunlight and the secondary color the stone. Four arches fit best; keep the carved names to one word and use the panel below for a short line about each section.