Runway pagination
Page numbers are painted on a runway seen from above: the plane taxis to the one you pick while approach lights race towards it.
Settings
Code
<nav class="uvq12-rw" aria-label="Pagination"><p class="rd"><span>Page</span><b class="pn">3</b><small>/ 8</small></p><div class="cs"><button type="button" class="pv" aria-label="Previous page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><div class="rn"><span class="cl" aria-hidden="true"></span><span class="gl" aria-hidden="true"></span><span class="rb" aria-hidden="true"></span><svg class="pl" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z"/></svg><div class="ns"><button type="button" aria-label="Page 1" tabindex="-1">01</button><button type="button" aria-label="Page 2" tabindex="-1">02</button><button type="button" aria-label="Page 3" aria-current="page" tabindex="0">03</button><button type="button" aria-label="Page 4" tabindex="-1">04</button><button type="button" aria-label="Page 5" tabindex="-1">05</button><button type="button" aria-label="Page 6" tabindex="-1">06</button><button type="button" aria-label="Page 7" tabindex="-1">07</button><button type="button" aria-label="Page 8" tabindex="-1">08</button></div></div><button type="button" class="nx" aria-label="Next page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div></nav>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
Pagination drawn as an airport runway seen from above, with edge lights, threshold stripes and a dashed centre line. Page numbers are painted along the tarmac, a small plane taxis to the one you choose and turns around when you go back, and a strobe of approach lights keeps running towards it. It suits travel sites, galleries and long lists with a handful of pages.
The main color sets the green threshold lights and the secondary color the plane. Eight pages fit comfortably; change the number in the data and the plane, lights and counter follow on their own.