{
  "id": "evidence-office-directory",
  "name": "Alphabetical Directory",
  "theme": "evidence-office",
  "category": "Search & Browse",
  "description": "A staff directory indexed by letter, where the index rail is the primary navigation and the rows are three fixed columns wide.",
  "layout": "Sticky A–Z rail down the left edge at 40px, entries grouped under large letter headings, each entry a three-column row of name, role and location with no avatars.",
  "modules": [
    {
      "key": "index",
      "name": "A–Z rail",
      "html": "\n<nav class=\"az\" aria-label=\"Jump to letter\"><a href=\"#\" class=\"on\">A</a><a href=\"#\">B</a><a href=\"#\">C</a><a href=\"#\">D</a><a href=\"#\" class=\"off\">E</a><a href=\"#\">F</a><a href=\"#\">G</a><a href=\"#\">H</a><a href=\"#\" class=\"off\">I</a><a href=\"#\">J</a><a href=\"#\">K</a><a href=\"#\">L</a><a href=\"#\">M</a><a href=\"#\">N</a><a href=\"#\">O</a><a href=\"#\">P</a><a href=\"#\" class=\"off\">Q</a><a href=\"#\">R</a><a href=\"#\">S</a><a href=\"#\">T</a><a href=\"#\" class=\"off\">U</a><a href=\"#\">V</a><a href=\"#\">W</a></nav>"
    },
    {
      "key": "header",
      "name": "Directory header",
      "html": "\n<header class=\"dh\"><h1>Staff directory</h1><p>412 people across 9 services. Updated nightly from the establishment record.</p><input type=\"search\" placeholder=\"Filter by name or team\"></header>"
    },
    {
      "key": "entries",
      "name": "Directory entries",
      "html": "\n<div class=\"dir\">\n  <h2>A</h2>\n  <ul>\n    <li><b>Adeyemi, Tunde</b><span>Principal Officer</span><span class=\"loc\">Civic Hall, 3F</span></li>\n    <li><b>Ahmad, Sana</b><span>Case Officer</span><span class=\"loc\">Civic Hall, 2F</span></li>\n    <li><b>Arnesen, Kari</b><span>Enforcement</span><span class=\"loc\">Depot, Northfield</span></li>\n  </ul>\n  <h2>B</h2>\n  <ul>\n    <li><b>Balogun, Ife</b><span>Legal, Planning</span><span class=\"loc\">Town Hall, 1F</span></li>\n    <li><b>Brennan, Colm</b><span>Conservation</span><span class=\"loc\">Civic Hall, 3F</span></li>\n  </ul>\n  <h2>C</h2>\n  <ul>\n    <li><b>Castellanos, Rosa</b><span>Committee Clerk</span><span class=\"loc\">Town Hall, GF</span></li>\n    <li><b>Chen, Wei</b><span>Data &amp; Reporting</span><span class=\"loc\">Remote</span></li>\n    <li><b>Coyle, Fiona</b><span>Case Officer</span><span class=\"loc\">Civic Hall, 2F</span></li>\n  </ul>\n</div>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "evidence-office-directory",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:23:29+09:00",
    "updatedAt": "2026-08-29T18:23:29+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/evidence-office-directory.json",
  "structure": "Sticky A–Z rail down the left edge at 40px, entries grouped under large letter headings, each entry a three-column row of name, role and location with no avatars.",
  "html": "<div class=\"dz dz-evidence-office-directory\" data-design=\"evidence-office-directory\" data-theme=\"evidence-office\">\n<section class=\"dz-mod\" data-mod=\"index\" aria-label=\"A–Z rail\">\n<nav class=\"az\" aria-label=\"Jump to letter\"><a href=\"#\" class=\"on\">A</a><a href=\"#\">B</a><a href=\"#\">C</a><a href=\"#\">D</a><a href=\"#\" class=\"off\">E</a><a href=\"#\">F</a><a href=\"#\">G</a><a href=\"#\">H</a><a href=\"#\" class=\"off\">I</a><a href=\"#\">J</a><a href=\"#\">K</a><a href=\"#\">L</a><a href=\"#\">M</a><a href=\"#\">N</a><a href=\"#\">O</a><a href=\"#\">P</a><a href=\"#\" class=\"off\">Q</a><a href=\"#\">R</a><a href=\"#\">S</a><a href=\"#\">T</a><a href=\"#\" class=\"off\">U</a><a href=\"#\">V</a><a href=\"#\">W</a></nav></section><div class=\"main\"><section class=\"dz-mod\" data-mod=\"header\" aria-label=\"Directory header\">\n<header class=\"dh\"><h1>Staff directory</h1><p>412 people across 9 services. Updated nightly from the establishment record.</p><input type=\"search\" placeholder=\"Filter by name or team\"></header></section><section class=\"dz-mod\" data-mod=\"entries\" aria-label=\"Directory entries\">\n<div class=\"dir\">\n  <h2>A</h2>\n  <ul>\n    <li><b>Adeyemi, Tunde</b><span>Principal Officer</span><span class=\"loc\">Civic Hall, 3F</span></li>\n    <li><b>Ahmad, Sana</b><span>Case Officer</span><span class=\"loc\">Civic Hall, 2F</span></li>\n    <li><b>Arnesen, Kari</b><span>Enforcement</span><span class=\"loc\">Depot, Northfield</span></li>\n  </ul>\n  <h2>B</h2>\n  <ul>\n    <li><b>Balogun, Ife</b><span>Legal, Planning</span><span class=\"loc\">Town Hall, 1F</span></li>\n    <li><b>Brennan, Colm</b><span>Conservation</span><span class=\"loc\">Civic Hall, 3F</span></li>\n  </ul>\n  <h2>C</h2>\n  <ul>\n    <li><b>Castellanos, Rosa</b><span>Committee Clerk</span><span class=\"loc\">Town Hall, GF</span></li>\n    <li><b>Chen, Wei</b><span>Data &amp; Reporting</span><span class=\"loc\">Remote</span></li>\n    <li><b>Coyle, Fiona</b><span>Case Officer</span><span class=\"loc\">Civic Hall, 2F</span></li>\n  </ul>\n</div></section></div>\n</div>",
  "css": "\n.dz-evidence-office-directory { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 40px minmax(0, 1fr); min-height: 520px; }\n.dz-evidence-office-directory .az { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 22px 0; border-right: var(--pv-bw) solid var(--border); background: var(--muted); position: sticky; top: 0; align-self: start; }\n.dz-evidence-office-directory .az a { font-family: var(--pv-mono); font-size: 11px; color: var(--muted-foreground); text-decoration: none; padding: 2px 6px; border-radius: var(--pv-radius-sm); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-evidence-office-directory .az a:hover { background: var(--secondary); color: var(--primary); }\n.dz-evidence-office-directory .az a.on { background: var(--primary); color: var(--primary-foreground); }\n.dz-evidence-office-directory .az a.off { opacity: .3; pointer-events: none; }\n.dz-evidence-office-directory .main { padding: 24px 28px 26px; }\n.dz-evidence-office-directory .dh { padding-bottom: 14px; border-bottom: var(--pv-bw) solid var(--foreground); }\n.dz-evidence-office-directory .dh h1 { font-family: var(--pv-display); font-size: 22px; letter-spacing: -.025em; margin: 0 0 5px; }\n.dz-evidence-office-directory .dh p { margin: 0 0 12px; font-size: 13px; color: var(--muted-foreground); }\n.dz-evidence-office-directory .dh input { width: 100%; max-width: 26rem; font: inherit; font-size: 14px; padding: 9px 12px; border: var(--pv-bw) solid var(--input); border-radius: var(--pv-radius-sm); background: var(--card); color: var(--foreground); }\n.dz-evidence-office-directory .dh input:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }\n.dz-evidence-office-directory .dir h2 { font-family: var(--pv-display); font-size: 32px; letter-spacing: -.03em; color: var(--primary); margin: 22px 0 0; }\n.dz-evidence-office-directory .dir ul { list-style: none; margin: 6px 0 0; padding: 0; border-top: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-directory .dir li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 180px; gap: 16px; align-items: baseline; padding: 10px 8px 10px 0; border-bottom: var(--pv-bw) solid var(--border); font-size: 13.5px; transition: background var(--dur) var(--ease); }\n.dz-evidence-office-directory .dir li:hover { background: var(--secondary); }\n.dz-evidence-office-directory .dir b { font-weight: 600; }\n.dz-evidence-office-directory .dir span { color: var(--muted-foreground); }\n.dz-evidence-office-directory .loc { font-family: var(--pv-mono); font-size: 12px; }\n@media (prefers-reduced-motion: reduce) { .dz-evidence-office-directory *, .dz-evidence-office-directory *::before, .dz-evidence-office-directory *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/evidence-office.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}