{
  "id": "curated-catalog-compare-two",
  "name": "Compare Two",
  "theme": "curated-catalog",
  "category": "Search & Browse",
  "description": "A two-object comparison where rows that differ are marked, so you can find the actual decision in about four seconds.",
  "layout": "Two sticky object headers side by side above a shared attribute table; every row is a three-column grid and differing rows carry a left marker in the accent.",
  "modules": [
    {
      "key": "heads",
      "name": "Object headers",
      "html": "\n<div class=\"hds\">\n  <div class=\"sp\"></div>\n  <div class=\"hd\"><img src=\"{{ART object}}\" alt=\"{{ARTALT object}}\"><h2>Turned Walnut Bowl</h2><span>£186</span><button type=\"button\">Add to bag</button></div>\n  <div class=\"hd\"><img src=\"{{IMG product 300 300}}\" alt=\"{{ALT product}}\"><h2>Everyday Bowl, Sage</h2><span>£42</span><button type=\"button\">Add to bag</button></div>\n</div>"
    },
    {
      "key": "table",
      "name": "Attribute rows",
      "html": "\n<div class=\"cmp\">\n  <div class=\"row diff\"><span class=\"k\">Material</span><span>English walnut, brass</span><span>Stoneware</span></div>\n  <div class=\"row diff\"><span class=\"k\">Made</span><span>To order, 3–4 weeks</span><span>In stock</span></div>\n  <div class=\"row\"><span class=\"k\">Maker</span><span>Kilcarn Studio</span><span>Kilcarn Studio</span></div>\n  <div class=\"row diff\"><span class=\"k\">Diameter</span><span>210mm</span><span>160mm</span></div>\n  <div class=\"row diff\"><span class=\"k\">Food safe</span><span>Dry goods only</span><span>Yes, dishwasher safe</span></div>\n  <div class=\"row\"><span class=\"k\">Returns</span><span>30 days</span><span>30 days</span></div>\n  <div class=\"row diff\"><span class=\"k\">Care</span><span>Wipe, re-oil annually</span><span>No special care</span></div>\n</div>"
    },
    {
      "key": "verdict",
      "name": "Verdict note",
      "html": "\n<footer class=\"vd\"><span class=\"vd-k\">Which one</span><p>They are not competitors. The walnut piece is for keys and fruit and is not going near a dishwasher; the stoneware one is what you actually eat out of. Most people who compare these buy both, eventually.</p></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "curated-catalog-compare-two",
    "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-compare-two.json",
  "structure": "Two sticky object headers side by side above a shared attribute table; every row is a three-column grid and differing rows carry a left marker in the accent.",
  "html": "<div class=\"dz dz-curated-catalog-compare-two\" data-design=\"curated-catalog-compare-two\" data-theme=\"curated-catalog\">\n<section class=\"dz-mod\" data-mod=\"heads\" aria-label=\"Object headers\">\n<div class=\"hds\">\n  <div class=\"sp\"></div>\n  <div class=\"hd\"><img src=\"https://designlookbook.dev/assets/img/curated-catalog-object.webp\" alt=\"A brass and walnut object photographed against warm white\"><h2>Turned Walnut Bowl</h2><span>£186</span><button type=\"button\">Add to bag</button></div>\n  <div class=\"hd\"><img src=\"https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=300&h=300&q=70&auto=format&fit=crop\" alt=\"A red running shoe on a saturated red background\"><h2>Everyday Bowl, Sage</h2><span>£42</span><button type=\"button\">Add to bag</button></div>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Attribute rows\">\n<div class=\"cmp\">\n  <div class=\"row diff\"><span class=\"k\">Material</span><span>English walnut, brass</span><span>Stoneware</span></div>\n  <div class=\"row diff\"><span class=\"k\">Made</span><span>To order, 3–4 weeks</span><span>In stock</span></div>\n  <div class=\"row\"><span class=\"k\">Maker</span><span>Kilcarn Studio</span><span>Kilcarn Studio</span></div>\n  <div class=\"row diff\"><span class=\"k\">Diameter</span><span>210mm</span><span>160mm</span></div>\n  <div class=\"row diff\"><span class=\"k\">Food safe</span><span>Dry goods only</span><span>Yes, dishwasher safe</span></div>\n  <div class=\"row\"><span class=\"k\">Returns</span><span>30 days</span><span>30 days</span></div>\n  <div class=\"row diff\"><span class=\"k\">Care</span><span>Wipe, re-oil annually</span><span>No special care</span></div>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"verdict\" aria-label=\"Verdict note\">\n<footer class=\"vd\"><span class=\"vd-k\">Which one</span><p>They are not competitors. The walnut piece is for keys and fruit and is not going near a dishwasher; the stoneware one is what you actually eat out of. Most people who compare these buy both, eventually.</p></footer></section>\n</div>",
  "css": "\n.dz-curated-catalog-compare-two { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px 34px 30px; }\n.dz-curated-catalog-compare-two .hds { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding-bottom: 20px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-curated-catalog-compare-two .hd { text-align: center; }\n.dz-curated-catalog-compare-two .hd img { width: 100%; max-width: 190px; aspect-ratio: 1; object-fit: cover; border-radius: var(--pv-radius); display: block; margin: 0 auto 12px; box-shadow: 0 6px 20px color-mix(in srgb, var(--foreground) 10%, transparent); }\n.dz-curated-catalog-compare-two .hd h2 { font-family: var(--pv-display); font-size: 19px; margin: 0 0 4px; }\n.dz-curated-catalog-compare-two .hd span { display: block; font-size: 14px; color: var(--primary); margin-bottom: 12px; }\n.dz-curated-catalog-compare-two .hd button { font: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 20px; border: 0; border-radius: var(--pv-radius-xl); background: var(--primary); color: var(--primary-foreground); cursor: pointer; transition: transform var(--dur) var(--ease); }\n.dz-curated-catalog-compare-two .hd button:hover { transform: translateY(-2px); }\n.dz-curated-catalog-compare-two .row { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 12px 0 12px 14px; border-bottom: var(--pv-bw) solid var(--border); font-size: 14px; border-left: 3px solid transparent; transition: background var(--dur) var(--ease); }\n.dz-curated-catalog-compare-two .row:hover { background: var(--muted); }\n.dz-curated-catalog-compare-two .row.diff { border-left-color: var(--primary); }\n.dz-curated-catalog-compare-two .k { font-size: 13px; color: var(--muted-foreground); }\n.dz-curated-catalog-compare-two .vd { margin-top: 22px; background: var(--muted); border-radius: var(--pv-radius-xl); padding: 20px 24px; }\n.dz-curated-catalog-compare-two .vd-k { font-family: var(--pv-display); font-size: 18px; color: var(--primary); }\n.dz-curated-catalog-compare-two .vd p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--muted-foreground); max-width: 64ch; }\n@media (prefers-reduced-motion: reduce) { .dz-curated-catalog-compare-two *, .dz-curated-catalog-compare-two *::before, .dz-curated-catalog-compare-two *::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"
}