Resultados
Grid or list view switch
A view selector that rearranges sample cards between a grid and a list with a smooth transition.
Settings
Code
<div class="uv-fvw"><div class="hd"><p>Results</p><div class="sw" role="radiogroup" aria-label="View"><label><input type="radio" name="uv-fvw" checked><span aria-label="Grid"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="4" y="13.5" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1.5"/></svg></span></label><label><input type="radio" name="uv-fvw"><span aria-label="List"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6h11M9 12h11M9 18h11"/><circle cx="4.8" cy="6" r="1.1" fill="currentColor"/><circle cx="4.8" cy="12" r="1.1" fill="currentColor"/><circle cx="4.8" cy="18" r="1.1" fill="currentColor"/></svg></span></label><i class="pl" aria-hidden="true"></i></div></div><ul><li style="--h:210"><i></i><span><b></b><b></b></span></li><li style="--h:160"><i></i><span><b></b><b></b></span></li><li style="--h:20"><i></i><span><b></b><b></b></span></li><li style="--h:280"><i></i><span><b></b><b></b></span></li></ul></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 Filters
See all FiltersWhere to use it
Product catalogs, file managers and search results often offer two views, and the switch should show what changes. Here a small segmented control with grid and list icons slides a white pill between the two options, and the cards below reflow: thumbnails shrink, text moves beside them and the gap tightens.
The layout change is pure CSS driven by the selected radio, with transitions on the grid, the gap and the thumbnail size. Drop in your own cards and keep the same class names, and the switch keeps working without JavaScript.