{
  "id": "curated-catalog-filter-grid",
  "name": "Filter Grid",
  "theme": "curated-catalog",
  "category": "Search & Browse",
  "description": "A browse grid whose filters are a horizontal bar of expandable groups, leaving the full width to the objects themselves.",
  "layout": "Horizontal filter bar using native details/summary popovers instead of a sidebar, then a four-across grid of portrait cards with the price on the image and the maker below it.",
  "modules": [
    {
      "key": "bar",
      "name": "Filter bar",
      "html": "\n<div class=\"fb\">\n  <details><summary>Material</summary><div class=\"pop\"><label><input type=\"checkbox\" checked> Stoneware</label><label><input type=\"checkbox\"> Wool</label><label><input type=\"checkbox\"> Walnut</label><label><input type=\"checkbox\"> Brass</label></div></details>\n  <details><summary>Price</summary><div class=\"pop\"><label><input type=\"radio\" name=\"cc-fg-p\" checked> Any</label><label><input type=\"radio\" name=\"cc-fg-p\"> Under £75</label><label><input type=\"radio\" name=\"cc-fg-p\"> £75 – £200</label><label><input type=\"radio\" name=\"cc-fg-p\"> Over £200</label></div></details>\n  <details><summary>Availability</summary><div class=\"pop\"><label><input type=\"checkbox\" checked> In stock</label><label><input type=\"checkbox\" checked> Made to order</label></div></details>\n  <span class=\"fb-sp\"></span>\n  <span class=\"fb-n\">42 objects</span>\n  <select aria-label=\"Sort by\"><option>Recently added</option><option>Price, low to high</option><option>Maker A–Z</option></select>\n</div>"
    },
    {
      "key": "grid",
      "name": "Object grid",
      "html": "\n<div class=\"og\">\n  <a class=\"ob\" href=\"#\"><figure><img src=\"{{ART object}}\" alt=\"{{ARTALT object}}\"><span class=\"tag\">£186</span></figure><h3>Turned Walnut Bowl</h3><p>Kilcarn Studio</p></a>\n  <a class=\"ob\" href=\"#\"><figure><img src=\"{{ART textile}}\" alt=\"{{ARTALT textile}}\"><span class=\"tag\">£118</span></figure><h3>Undyed Table Runner</h3><p>Marsh Lane Weavers</p></a>\n  <a class=\"ob\" href=\"#\"><figure><img src=\"{{IMG product 400 500}}\" alt=\"{{ALT product}}\"><span class=\"tag\">£42</span></figure><h3>Everyday Bowl</h3><p>Kilcarn Studio</p></a>\n  <a class=\"ob\" href=\"#\"><figure><img src=\"{{IMG interior 400 500}}\" alt=\"{{ALT interior}}\"><span class=\"tag\">£64</span></figure><h3>Ribbed Tumbler, Set of Two</h3><p>Fen Glass</p></a>\n  <a class=\"ob\" href=\"#\"><figure><img src=\"{{IMG texture 400 500}}\" alt=\"{{ALT texture}}\"><span class=\"tag\">£29</span></figure><h3>Marbled Endpaper Set</h3><p>Hollow Press</p></a>\n  <a class=\"ob\" href=\"#\"><figure><img src=\"{{ART gallery}}\" alt=\"{{ARTALT gallery}}\"><span class=\"tag\">£310</span></figure><h3>Ash Bench, Short</h3><p>Northfield Joinery</p></a>\n  <a class=\"ob\" href=\"#\"><figure><img src=\"{{IMG retail 400 500}}\" alt=\"{{ALT retail}}\"><span class=\"tag\">£95</span></figure><h3>Linen Apron</h3><p>Marsh Lane Weavers</p></a>\n  <a class=\"ob\" href=\"#\"><figure><img src=\"{{ART spread}}\" alt=\"{{ARTALT spread}}\"><span class=\"tag\">£24</span></figure><h3>Catalogue, Issue Four</h3><p>Vessel &amp; Co.</p></a>\n</div>"
    },
    {
      "key": "more",
      "name": "Pagination",
      "html": "\n<footer class=\"pg\"><span>Showing 8 of 42</span><div><button type=\"button\" disabled>Previous</button><button type=\"button\">Next 8</button></div></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "curated-catalog-filter-grid",
    "model": "Claude Fable 5.1",
    "author": "Claude Code",
    "createdAt": "2026-09-02T16:52:47+09:00",
    "updatedAt": "2026-09-02T16:58:37+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/curated-catalog-filter-grid.json",
  "structure": "Horizontal filter bar using native details/summary popovers instead of a sidebar, then a four-across grid of portrait cards with the price on the image and the maker below it.",
  "html": "<div class=\"dz dz-curated-catalog-filter-grid\" data-design=\"curated-catalog-filter-grid\" data-theme=\"curated-catalog\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Filter bar\">\n<div class=\"fb\">\n  <details><summary>Material</summary><div class=\"pop\"><label><input type=\"checkbox\" checked> Stoneware</label><label><input type=\"checkbox\"> Wool</label><label><input type=\"checkbox\"> Walnut</label><label><input type=\"checkbox\"> Brass</label></div></details>\n  <details><summary>Price</summary><div class=\"pop\"><label><input type=\"radio\" name=\"cc-fg-p\" checked> Any</label><label><input type=\"radio\" name=\"cc-fg-p\"> Under £75</label><label><input type=\"radio\" name=\"cc-fg-p\"> £75 – £200</label><label><input type=\"radio\" name=\"cc-fg-p\"> Over £200</label></div></details>\n  <details><summary>Availability</summary><div class=\"pop\"><label><input type=\"checkbox\" checked> In stock</label><label><input type=\"checkbox\" checked> Made to order</label></div></details>\n  <span class=\"fb-sp\"></span>\n  <span class=\"fb-n\">42 objects</span>\n  <select aria-label=\"Sort by\"><option>Recently added</option><option>Price, low to high</option><option>Maker A–Z</option></select>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Object grid\">\n<div class=\"og\">\n  <a class=\"ob\" href=\"#\"><figure><img src=\"https://designlookbook.dev/assets/img/curated-catalog-object.webp\" alt=\"A brass and walnut object photographed against warm white\"><span class=\"tag\">£186</span></figure><h3>Turned Walnut Bowl</h3><p>Kilcarn Studio</p></a>\n  <a class=\"ob\" href=\"#\"><figure><img src=\"https://designlookbook.dev/assets/img/curated-catalog-textile.webp\" alt=\"A folded woven textile with a fine sage and bordeaux stripe\"><span class=\"tag\">£118</span></figure><h3>Undyed Table Runner</h3><p>Marsh Lane Weavers</p></a>\n  <a class=\"ob\" href=\"#\"><figure><img src=\"https://images.unsplash.com/photo-1517849845537-4d257902454a?w=400&h=500&q=70&auto=format&fit=crop\" alt=\"A red running shoe on a saturated red background\"><span class=\"tag\">£42</span></figure><h3>Everyday Bowl</h3><p>Kilcarn Studio</p></a>\n  <a class=\"ob\" href=\"#\"><figure><img src=\"https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=400&h=500&q=70&auto=format&fit=crop\" alt=\"A bright minimal lounge with pale armchairs\"><span class=\"tag\">£64</span></figure><h3>Ribbed Tumbler, Set of Two</h3><p>Fen Glass</p></a>\n  <a class=\"ob\" href=\"#\"><figure><img src=\"https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?w=400&h=500&q=70&auto=format&fit=crop\" alt=\"Two latte cups held over a dark table, seen from above\"><span class=\"tag\">£29</span></figure><h3>Marbled Endpaper Set</h3><p>Hollow Press</p></a>\n  <a class=\"ob\" href=\"#\"><figure><img src=\"https://designlookbook.dev/assets/img/curated-catalog-gallery.webp\" alt=\"A quiet gallery corner with one framed piece and a bench\"><span class=\"tag\">£310</span></figure><h3>Ash Bench, Short</h3><p>Northfield Joinery</p></a>\n  <a class=\"ob\" href=\"#\"><figure><img src=\"https://images.unsplash.com/photo-1543007630-9710e4a00a20?w=400&h=500&q=70&auto=format&fit=crop\" alt=\"Warm bar interior lit by rows of pendant lamps\"><span class=\"tag\">£95</span></figure><h3>Linen Apron</h3><p>Marsh Lane Weavers</p></a>\n  <a class=\"ob\" href=\"#\"><figure><img src=\"https://designlookbook.dev/assets/img/curated-catalog-spread.webp\" alt=\"An open catalogue lying on bordeaux and sage colour blocks, the right page blank\"><span class=\"tag\">£24</span></figure><h3>Catalogue, Issue Four</h3><p>Vessel &amp; Co.</p></a>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"more\" aria-label=\"Pagination\">\n<footer class=\"pg\"><span>Showing 8 of 42</span><div><button type=\"button\" disabled>Previous</button><button type=\"button\">Next 8</button></div></footer></section>\n</div>",
  "css": "\n.dz-curated-catalog-filter-grid { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 22px 30px 26px; }\n.dz-curated-catalog-filter-grid .fb { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-curated-catalog-filter-grid .fb details { position: relative; }\n.dz-curated-catalog-filter-grid .fb summary { list-style: none; font-size: 13.5px; padding: 8px 16px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-xl); background: var(--card); cursor: pointer; transition: border-color var(--dur) var(--ease); }\n.dz-curated-catalog-filter-grid .fb summary::-webkit-details-marker { display: none; }\n.dz-curated-catalog-filter-grid .fb summary::after { content: \" ▾\"; color: var(--muted-foreground); }\n.dz-curated-catalog-filter-grid .fb details[open] summary { border-color: var(--primary); color: var(--primary); }\n.dz-curated-catalog-filter-grid .pop { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; min-width: 190px; background: var(--popover); color: var(--popover-foreground); border-radius: var(--pv-radius); padding: 12px 14px; box-shadow: 0 12px 30px color-mix(in srgb, var(--foreground) 20%, transparent); }\n.dz-curated-catalog-filter-grid .pop label { display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 5px 0; cursor: pointer; }\n.dz-curated-catalog-filter-grid .pop input { accent-color: var(--primary); }\n.dz-curated-catalog-filter-grid .fb-sp { flex: 1; }\n.dz-curated-catalog-filter-grid .fb-n { font-size: 13px; color: var(--muted-foreground); }\n.dz-curated-catalog-filter-grid .fb select { font: inherit; font-size: 13px; padding: 8px 12px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-xl); background: var(--card); color: var(--foreground); }\n.dz-curated-catalog-filter-grid .og { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 22px 0; }\n.dz-curated-catalog-filter-grid .ob { text-decoration: none; color: var(--foreground); }\n.dz-curated-catalog-filter-grid .ob figure { position: relative; margin: 0 0 10px; border-radius: var(--pv-radius); overflow: hidden; box-shadow: 0 3px 12px color-mix(in srgb, var(--foreground) 8%, transparent); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-curated-catalog-filter-grid .ob:hover figure { transform: translateY(-4px); box-shadow: 0 14px 30px color-mix(in srgb, var(--foreground) 16%, transparent); }\n.dz-curated-catalog-filter-grid .ob img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }\n.dz-curated-catalog-filter-grid .ob:hover img { transform: scale(1.03); }\n.dz-curated-catalog-filter-grid .tag { position: absolute; top: 10px; right: 10px; font-size: 12.5px; background: var(--card); color: var(--foreground); padding: 4px 11px; border-radius: var(--pv-radius-xl); }\n.dz-curated-catalog-filter-grid .ob h3 { font-family: var(--pv-display); font-size: 16.5px; margin: 0 0 2px; line-height: 1.25; }\n.dz-curated-catalog-filter-grid .ob p { margin: 0; font-size: 12.5px; color: var(--muted-foreground); }\n.dz-curated-catalog-filter-grid .pg { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: var(--pv-bw) solid var(--border); font-size: 13px; color: var(--muted-foreground); }\n.dz-curated-catalog-filter-grid .pg div { display: flex; gap: 8px; }\n.dz-curated-catalog-filter-grid .pg button { font: inherit; font-size: 13px; padding: 8px 16px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-xl); background: var(--card); color: var(--foreground); cursor: pointer; }\n.dz-curated-catalog-filter-grid .pg button:disabled { opacity: .4; cursor: not-allowed; }\n@media (prefers-reduced-motion: reduce) { .dz-curated-catalog-filter-grid *, .dz-curated-catalog-filter-grid *::before, .dz-curated-catalog-filter-grid *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/curated-catalog.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}