{
  "id": "curtain-call-whatson",
  "name": "What's On",
  "theme": "curtain-call",
  "category": "Search & Browse",
  "description": "A browse screen that filters by the two things people actually decide on — the night they are free and how much they want to spend — and drops every other facet.",
  "layout": "A 240px filter rail beside a two-column card grid, with a horizontal date strip pinned above both so the week is chosen before anything else.",
  "modules": [
    {
      "key": "week",
      "name": "Week strip",
      "html": "\n<nav class=\"wk\"><span class=\"lbl\">Week of</span><ul><li><a href=\"#\">Mon 08</a></li><li class=\"on\"><a href=\"#\">Tue 09</a></li><li><a href=\"#\">Wed 10</a></li><li><a href=\"#\">Thu 11</a></li><li><a href=\"#\">Fri 12</a></li><li><a href=\"#\">Sat 13</a></li><li class=\"off\"><a href=\"#\">Sun 14</a></li></ul><span class=\"lbl r\">3 productions playing</span></nav>"
    },
    {
      "key": "rail",
      "name": "Filter rail",
      "html": "\n<aside class=\"fr\">\n  <fieldset><legend>Price</legend><label><input type=\"checkbox\" checked> Under £25</label><label><input type=\"checkbox\"> £25 to £45</label><label><input type=\"checkbox\"> Any</label></fieldset>\n  <fieldset><legend>Access</legend><label><input type=\"checkbox\"> Captioned</label><label><input type=\"checkbox\"> Audio described</label><label><input type=\"checkbox\"> Relaxed</label></fieldset>\n  <fieldset><legend>Running time</legend><label><input type=\"radio\" name=\"rt\" checked> Any</label><label><input type=\"radio\" name=\"rt\"> Under 90 minutes</label></fieldset>\n</aside>"
    },
    {
      "key": "grid",
      "name": "Result cards",
      "html": "\n<section class=\"rg\">\n  <article><img src=\"{{ART seats}}\" alt=\"{{ARTALT seats}}\"><div class=\"rb\"><time>19:30</time><h3>A Number</h3><p>Two actors, sixty minutes, no interval.</p><span class=\"pr\">From £22</span></div></article>\n  <article><img src=\"{{ART foyer}}\" alt=\"{{ARTALT foyer}}\"><div class=\"rb\"><time>14:00</time><h3>Kaidan, or The Long Hallway</h3><p>Japanese with English surtitles. Captioned matinee.</p><span class=\"pr\">From £18</span></div></article>\n  <article><img src=\"{{ART curtain}}\" alt=\"{{ARTALT curtain}}\"><div class=\"rb\"><time>20:00</time><h3>Late Shift: Marlowe Sessions</h3><p>An hour of new writing read cold, in the bar.</p><span class=\"pr\">Free to members</span></div></article>\n  <article class=\"empty\"><p>Nothing else is playing on Tuesday. Wednesday has five.</p></article>\n</section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "curtain-call-whatson",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T23:32:27+09:00",
    "updatedAt": "2026-09-01T23:32:27+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/curtain-call-whatson.json",
  "structure": "A 240px filter rail beside a two-column card grid, with a horizontal date strip pinned above both so the week is chosen before anything else.",
  "html": "<div class=\"dz dz-curtain-call-whatson\" data-design=\"curtain-call-whatson\" data-theme=\"curtain-call\">\n<section class=\"dz-mod\" data-mod=\"week\" aria-label=\"Week strip\">\n<nav class=\"wk\"><span class=\"lbl\">Week of</span><ul><li><a href=\"#\">Mon 08</a></li><li class=\"on\"><a href=\"#\">Tue 09</a></li><li><a href=\"#\">Wed 10</a></li><li><a href=\"#\">Thu 11</a></li><li><a href=\"#\">Fri 12</a></li><li><a href=\"#\">Sat 13</a></li><li class=\"off\"><a href=\"#\">Sun 14</a></li></ul><span class=\"lbl r\">3 productions playing</span></nav></section><div class=\"cols\"><section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Filter rail\">\n<aside class=\"fr\">\n  <fieldset><legend>Price</legend><label><input type=\"checkbox\" checked> Under £25</label><label><input type=\"checkbox\"> £25 to £45</label><label><input type=\"checkbox\"> Any</label></fieldset>\n  <fieldset><legend>Access</legend><label><input type=\"checkbox\"> Captioned</label><label><input type=\"checkbox\"> Audio described</label><label><input type=\"checkbox\"> Relaxed</label></fieldset>\n  <fieldset><legend>Running time</legend><label><input type=\"radio\" name=\"rt\" checked> Any</label><label><input type=\"radio\" name=\"rt\"> Under 90 minutes</label></fieldset>\n</aside></section><section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Result cards\">\n<section class=\"rg\">\n  <article><img src=\"https://designlookbook.dev/assets/img/curtain-call-seats.webp\" alt=\"Rows of empty folding seats from directly above\"><div class=\"rb\"><time>19:30</time><h3>A Number</h3><p>Two actors, sixty minutes, no interval.</p><span class=\"pr\">From £22</span></div></article>\n  <article><img src=\"https://designlookbook.dev/assets/img/curtain-call-foyer.webp\" alt=\"A quiet foyer with a staircase under low evening light\"><div class=\"rb\"><time>14:00</time><h3>Kaidan, or The Long Hallway</h3><p>Japanese with English surtitles. Captioned matinee.</p><span class=\"pr\">From £18</span></div></article>\n  <article><img src=\"https://designlookbook.dev/assets/img/curtain-call-curtain.webp\" alt=\"Heavy plum stage curtain falling in deep folds\"><div class=\"rb\"><time>20:00</time><h3>Late Shift: Marlowe Sessions</h3><p>An hour of new writing read cold, in the bar.</p><span class=\"pr\">Free to members</span></div></article>\n  <article class=\"empty\"><p>Nothing else is playing on Tuesday. Wednesday has five.</p></article>\n</section></section></div>\n</div>",
  "css": "\n.dz-curtain-call-whatson { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 30px 30px; }\n.dz-curtain-call-whatson .wk { display: flex; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border); }\n.dz-curtain-call-whatson .lbl { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .01em; color: var(--muted-foreground); }\n.dz-curtain-call-whatson .lbl.r { margin-left: auto; }\n.dz-curtain-call-whatson .wk ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }\n.dz-curtain-call-whatson .wk a { display: block; padding: 9px 15px; border-radius: var(--pv-radius-sm); text-decoration: none; color: var(--foreground); font-size: 14px; }\n.dz-curtain-call-whatson .wk li.on a { background: var(--primary); color: var(--primary-foreground); }\n.dz-curtain-call-whatson .wk li.off a { color: var(--muted-foreground); }\n.dz-curtain-call-whatson .cols { display: grid; grid-template-columns: 240px 1fr; gap: 30px; margin-top: 26px; align-items: start; }\n.dz-curtain-call-whatson .fr fieldset { border: 0; border-top: 1px solid var(--border); margin: 0 0 20px; padding: 16px 0 0; }\n.dz-curtain-call-whatson legend { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .01em; color: var(--muted-foreground); padding: 0; }\n.dz-curtain-call-whatson .fr label { display: flex; gap: 9px; align-items: center; font-size: 14px; padding: 6px 0; }\n.dz-curtain-call-whatson .rg { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }\n.dz-curtain-call-whatson .rg article { background: var(--card); border-radius: var(--pv-radius); overflow: hidden; }\n.dz-curtain-call-whatson .rg img { width: 100%; height: 168px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-curtain-call-whatson .rb { padding: 18px; }\n.dz-curtain-call-whatson .rb time { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .01em; color: var(--muted-foreground); }\n.dz-curtain-call-whatson .rb h3 { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.015em; font-size: 23px; margin: 6px 0 6px; }\n.dz-curtain-call-whatson .rb p { margin: 0 0 12px; font-size: 13px; color: var(--muted-foreground); }\n.dz-curtain-call-whatson .pr { font-size: 14px; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }\n.dz-curtain-call-whatson .empty { display: flex; align-items: center; justify-content: center; background: none; border: 1px dashed var(--border); }\n.dz-curtain-call-whatson .empty p { margin: 0; padding: 26px; color: var(--muted-foreground); font-size: 14px; text-align: center; }\n",
  "requiredTheme": "/api/v1/themes/curtain-call.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Gloock:wght@400;500;600;700&family=Cabin:wght@400;500;600;700&family=Cutive+Mono:wght@400;500;600;700&display=swap"
}