Library card catalogue filter
A wooden card catalogue cabinet where each subject is a drawer with a brass pull that slides out when ticked.
Settings
Code
<fieldset class="uvq05-cc"><legend>Subjects</legend><div class="cab"><label><input type="checkbox"><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Art</span><i class="pl" aria-hidden="true"></i></span></span></label><label><input type="checkbox" checked><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Science</span><i class="pl" aria-hidden="true"></i></span></span></label><label><input type="checkbox"><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">History</span><i class="pl" aria-hidden="true"></i></span></span></label><label><input type="checkbox"><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Poetry</span><i class="pl" aria-hidden="true"></i></span></span></label><label><input type="checkbox" checked><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Travel</span><i class="pl" aria-hidden="true"></i></span></span></label><label><input type="checkbox"><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Kitchen</span><i class="pl" aria-hidden="true"></i></span></span></label></div><p class="ct"><span>Open drawers:</span> <span class="n"></span></p></fieldset>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
Library card catalogues were the original filter: one drawer per subject, full of index cards. Here each drawer is a checkbox with a typed label in a brass frame, and checking it pulls the drawer forward to show the cards inside. The wood grain is made only of CSS gradients. It suits bookshops, archives, course catalogues and reading apps.
Use the first colour for the brass hardware and the second for the wood, from pale oak to walnut. Keep the labels to one short word, and pair the cabinet with a result list that groups items by the open drawers.