{
  "id": "quiet-clinic-find",
  "name": "Find a Clinician",
  "theme": "quiet-clinic",
  "category": "Search & Browse",
  "description": "A clinician directory where the filters are the things people actually ask for — language, gender, and whether they are taking new patients.",
  "layout": "A horizontal filter row above a single-column list of tall rows; each row is a 96px round photo, a short biography in the clinician's own words, and an availability line.",
  "modules": [
    {
      "key": "filters",
      "name": "Practical filters",
      "html": "\n<div class=\"fl\">\n  <div class=\"fg\"><span>Speaks</span><select aria-label=\"Language\"><option>Any language</option><option>British Sign Language</option><option>Polish</option><option>Urdu</option><option>Yoruba</option></select></div>\n  <div class=\"fg\"><span>Gender</span><select aria-label=\"Clinician gender\"><option>No preference</option><option>Woman</option><option>Man</option></select></div>\n  <div class=\"fg\"><span>Availability</span><select aria-label=\"Availability\"><option>Taking new patients</option><option>Anyone</option></select></div>\n  <label class=\"ck\"><input type=\"checkbox\" checked> Step-free rooms only</label>\n</div>"
    },
    {
      "key": "list",
      "name": "Clinician list",
      "html": "\n<ul class=\"cl\">\n  <li><img src=\"{{ART hands}}\" alt=\"{{ARTALT hands}}\"><div><h2>Dr Priya Sandhu</h2><p class=\"rl\">GP · Respiratory, long-term conditions</p><p class=\"bio\">I see a lot of people with breathing problems and I would rather you came in early than waited to see if it settled.</p><p class=\"av\">Taking new patients · next free 24 July · speaks Punjabi, Urdu</p></div><button type=\"button\">Book</button></li>\n  <li><img src=\"{{ART plant}}\" alt=\"{{ARTALT plant}}\"><div><h2>Dr Colm Brennan</h2><p class=\"rl\">GP · Mental health, older adults</p><p class=\"bio\">Appointments with me are usually 20 minutes rather than 10. Please say if you need longer and we will arrange it.</p><p class=\"av\">Taking new patients · next free 29 July</p></div><button type=\"button\">Book</button></li>\n  <li class=\"full\"><img src=\"{{ART water}}\" alt=\"{{ARTALT water}}\"><div><h2>Sara Halvorsen</h2><p class=\"rl\">Respiratory nurse specialist</p><p class=\"bio\">I run the inhaler-technique clinic. Most people are doing something slightly wrong and it is nearly always fixable in ten minutes.</p><p class=\"av full\">List is full · joining again in September</p></div><button type=\"button\" disabled>Full</button></li>\n</ul>"
    },
    {
      "key": "note",
      "name": "Choice note",
      "html": "\n<footer class=\"nt\"><p>You can ask to see a particular clinician and you do not have to say why. If they are not available, we will offer someone else and tell you when they are free again.</p></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "quiet-clinic-find",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:59:53+09:00",
    "updatedAt": "2026-08-29T18:59:53+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/quiet-clinic-find.json",
  "structure": "A horizontal filter row above a single-column list of tall rows; each row is a 96px round photo, a short biography in the clinician's own words, and an availability line.",
  "html": "<div class=\"dz dz-quiet-clinic-find\" data-design=\"quiet-clinic-find\" data-theme=\"quiet-clinic\">\n<section class=\"dz-mod\" data-mod=\"filters\" aria-label=\"Practical filters\">\n<div class=\"fl\">\n  <div class=\"fg\"><span>Speaks</span><select aria-label=\"Language\"><option>Any language</option><option>British Sign Language</option><option>Polish</option><option>Urdu</option><option>Yoruba</option></select></div>\n  <div class=\"fg\"><span>Gender</span><select aria-label=\"Clinician gender\"><option>No preference</option><option>Woman</option><option>Man</option></select></div>\n  <div class=\"fg\"><span>Availability</span><select aria-label=\"Availability\"><option>Taking new patients</option><option>Anyone</option></select></div>\n  <label class=\"ck\"><input type=\"checkbox\" checked> Step-free rooms only</label>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"list\" aria-label=\"Clinician list\">\n<ul class=\"cl\">\n  <li><img src=\"https://designlookbook.dev/assets/img/quiet-clinic-hands.webp\" alt=\"Two pairs of hands resting on a pale table\"><div><h2>Dr Priya Sandhu</h2><p class=\"rl\">GP · Respiratory, long-term conditions</p><p class=\"bio\">I see a lot of people with breathing problems and I would rather you came in early than waited to see if it settled.</p><p class=\"av\">Taking new patients · next free 24 July · speaks Punjabi, Urdu</p></div><button type=\"button\">Book</button></li>\n  <li><img src=\"https://designlookbook.dev/assets/img/quiet-clinic-plant.webp\" alt=\"A single leafy plant against a warm white wall\"><div><h2>Dr Colm Brennan</h2><p class=\"rl\">GP · Mental health, older adults</p><p class=\"bio\">Appointments with me are usually 20 minutes rather than 10. Please say if you need longer and we will arrange it.</p><p class=\"av\">Taking new patients · next free 29 July</p></div><button type=\"button\">Book</button></li>\n  <li class=\"full\"><img src=\"https://designlookbook.dev/assets/img/quiet-clinic-water.webp\" alt=\"Still water in a pale teal basin catching soft light\"><div><h2>Sara Halvorsen</h2><p class=\"rl\">Respiratory nurse specialist</p><p class=\"bio\">I run the inhaler-technique clinic. Most people are doing something slightly wrong and it is nearly always fixable in ten minutes.</p><p class=\"av full\">List is full · joining again in September</p></div><button type=\"button\" disabled>Full</button></li>\n</ul></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"Choice note\">\n<footer class=\"nt\"><p>You can ask to see a particular clinician and you do not have to say why. If they are not available, we will offer someone else and tell you when they are free again.</p></footer></section>\n</div>",
  "css": "\n.dz-quiet-clinic-find { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 26px 30px 30px; max-width: 50rem; margin: 0 auto; }\n.dz-quiet-clinic-find .fl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding-bottom: 20px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-quiet-clinic-find .fg { display: flex; flex-direction: column; gap: 6px; }\n.dz-quiet-clinic-find .fg span { font-size: 15px; font-weight: 600; }\n.dz-quiet-clinic-find .fg select { font: inherit; font-size: 16px; min-height: 48px; padding: 0 14px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); background: var(--card); color: var(--foreground); }\n.dz-quiet-clinic-find .ck { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 16px; cursor: pointer; }\n.dz-quiet-clinic-find .ck input { accent-color: var(--primary); width: 22px; height: 22px; }\n.dz-quiet-clinic-find .cl { list-style: none; margin: 0; padding: 0; }\n.dz-quiet-clinic-find .cl li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 22px; align-items: start; padding: 24px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-quiet-clinic-find .cl img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; display: block; filter: var(--img-filter); }\n.dz-quiet-clinic-find .cl h2 { font-size: 22px; font-weight: 700; margin: 0 0 3px; }\n.dz-quiet-clinic-find .rl { margin: 0 0 10px; font-size: 15.5px; color: var(--primary); }\n.dz-quiet-clinic-find .bio { margin: 0 0 10px; font-size: 16.5px; line-height: 1.66; max-width: 56ch; }\n.dz-quiet-clinic-find .av { margin: 0; font-size: 15px; color: var(--muted-foreground); }\n.dz-quiet-clinic-find .av.full { color: var(--destructive); }\n.dz-quiet-clinic-find .cl button { flex: none; font: inherit; font-size: 16px; font-weight: 600; min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--pv-radius); background: var(--primary); color: var(--primary-foreground); cursor: pointer; transition: opacity var(--dur) var(--ease); }\n.dz-quiet-clinic-find .cl button:hover { opacity: .9; }\n.dz-quiet-clinic-find .cl button:disabled { background: var(--muted); color: var(--muted-foreground); cursor: not-allowed; }\n.dz-quiet-clinic-find .cl .full img { opacity: .7; }\n.dz-quiet-clinic-find .nt { margin-top: 22px; background: var(--muted); border-radius: var(--pv-radius); padding: 18px 22px; }\n.dz-quiet-clinic-find .nt p { margin: 0; font-size: 16px; line-height: 1.68; color: var(--muted-foreground); max-width: 66ch; }\n@media (prefers-reduced-motion: reduce) { .dz-quiet-clinic-find *, .dz-quiet-clinic-find *::before, .dz-quiet-clinic-find *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/quiet-clinic.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}