{
  "id": "kiln-clay-booking",
  "name": "Class Booking",
  "theme": "kiln-clay",
  "category": "Settings & Forms",
  "description": "A booking form that reads as a note to a person rather than a checkout, with the bench diagram showing which wheel you would be at.",
  "layout": "A 560px form column with a bench plan drawn as eight circles pinned in a sunken panel to its right, and the summary bar welded across the bottom of both.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><span class=\"k\">Booking</span><h1>Beginners' wheel · Thursday 11 September</h1><p>18:30 to 21:00. Clay, tools, firing and glazing are all included. Wear something you do not mind ruining.</p></header>"
    },
    {
      "key": "form",
      "name": "Booking form",
      "html": "\n<form class=\"fm\">\n  <label><span class=\"k\">Your name</span><input type=\"text\" value=\"Priya Ashworth-Blake\"></label>\n  <label><span class=\"k\">Email</span><input type=\"email\" value=\"priya@example.org\"></label>\n  <label><span class=\"k\">Have you thrown before?</span>\n    <div class=\"seg\"><button type=\"button\" class=\"on\">Never</button><button type=\"button\">Once or twice</button><button type=\"button\">Regularly</button></div></label>\n  <label><span class=\"k\">Anything we should know</span><textarea rows=\"3\">Left handed — is that a problem for the wheel direction?</textarea></label>\n  <label class=\"chk\"><input type=\"checkbox\" checked><span>Email me when this tutor runs the next intensive.</span></label>\n</form>"
    },
    {
      "key": "bench",
      "name": "Bench plan",
      "html": "\n<aside class=\"bn\"><span class=\"k\">Your wheel</span>\n<div class=\"wh\"><i></i><i></i><i class=\"x\"></i><i class=\"y\"></i><i></i><i class=\"x\"></i><i></i><i class=\"x\"></i></div>\n<span class=\"m\">Wheel 4, nearest the window and the tutor's bench.</span>\n<div class=\"lgd\"><span><i class=\"k1\"></i>free</span><span><i class=\"k2\"></i>taken</span><span><i class=\"k3\"></i>yours</span></div></aside>"
    },
    {
      "key": "summary",
      "name": "Summary bar",
      "html": "\n<footer class=\"sm\"><div><span class=\"k\">Total</span><b>£58</b></div><span class=\"m\">Cancel up to 48 hours before for a full refund.</span><button type=\"button\" class=\"go\">Book this place</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "kiln-clay-booking",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:50:29+09:00",
    "updatedAt": "2026-09-01T19:50:29+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/kiln-clay-booking.json",
  "structure": "A 560px form column with a bench plan drawn as eight circles pinned in a sunken panel to its right, and the summary bar welded across the bottom of both.",
  "html": "<div class=\"dz dz-kiln-clay-booking\" data-design=\"kiln-clay-booking\" data-theme=\"kiln-clay\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><span class=\"k\">Booking</span><h1>Beginners' wheel · Thursday 11 September</h1><p>18:30 to 21:00. Clay, tools, firing and glazing are all included. Wear something you do not mind ruining.</p></header></section><section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Booking form\">\n<form class=\"fm\">\n  <label><span class=\"k\">Your name</span><input type=\"text\" value=\"Priya Ashworth-Blake\"></label>\n  <label><span class=\"k\">Email</span><input type=\"email\" value=\"priya@example.org\"></label>\n  <label><span class=\"k\">Have you thrown before?</span>\n    <div class=\"seg\"><button type=\"button\" class=\"on\">Never</button><button type=\"button\">Once or twice</button><button type=\"button\">Regularly</button></div></label>\n  <label><span class=\"k\">Anything we should know</span><textarea rows=\"3\">Left handed — is that a problem for the wheel direction?</textarea></label>\n  <label class=\"chk\"><input type=\"checkbox\" checked><span>Email me when this tutor runs the next intensive.</span></label>\n</form></section><section class=\"dz-mod\" data-mod=\"bench\" aria-label=\"Bench plan\">\n<aside class=\"bn\"><span class=\"k\">Your wheel</span>\n<div class=\"wh\"><i></i><i></i><i class=\"x\"></i><i class=\"y\"></i><i></i><i class=\"x\"></i><i></i><i class=\"x\"></i></div>\n<span class=\"m\">Wheel 4, nearest the window and the tutor's bench.</span>\n<div class=\"lgd\"><span><i class=\"k1\"></i>free</span><span><i class=\"k2\"></i>taken</span><span><i class=\"k3\"></i>yours</span></div></aside></section><section class=\"dz-mod\" data-mod=\"summary\" aria-label=\"Summary bar\">\n<footer class=\"sm\"><div><span class=\"k\">Total</span><b>£58</b></div><span class=\"m\">Cancel up to 48 hours before for a full refund.</span><button type=\"button\" class=\"go\">Book this place</button></footer></section>\n</div>",
  "css": "\n.dz-kiln-clay-booking { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 560px) 260px; justify-content: center; column-gap: 40px; padding: 30px 32px 34px; align-content: start; }\n.dz-kiln-clay-booking .hd { grid-column: 1 / -1; margin-bottom: 24px; }\n.dz-kiln-clay-booking .k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-kiln-clay-booking .hd h1 { font-family: var(--pv-display); font-size: 34px; font-weight: 600; line-height: 1.1; margin: 8px 0 10px; }\n.dz-kiln-clay-booking .hd p { font-size: 15.5px; line-height: 1.6; color: var(--muted-foreground); margin: 0; max-width: 58ch; }\n.dz-kiln-clay-booking .fm { display: flex; flex-direction: column; gap: 18px; }\n.dz-kiln-clay-booking label { display: flex; flex-direction: column; gap: 8px; }\n.dz-kiln-clay-booking input[type=\"text\"], .dz-kiln-clay-booking input[type=\"email\"], .dz-kiln-clay-booking textarea { font: inherit; font-size: 15px; background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); background: var(--secondary); color: var(--foreground); padding: 12px 14px; resize: vertical; }\n.dz-kiln-clay-booking input:focus-visible, .dz-kiln-clay-booking textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }\n.dz-kiln-clay-booking .seg { display: flex; gap: 8px; }\n.dz-kiln-clay-booking .seg button { font: inherit; font-size: 14px; background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); background: transparent; color: var(--muted-foreground); padding: 10px 16px; cursor: pointer; transition: all var(--dur) var(--ease); }\n.dz-kiln-clay-booking .seg button:hover { color: var(--foreground); border-color: var(--primary); }\n.dz-kiln-clay-booking .seg .on { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }\n.dz-kiln-clay-booking .chk { flex-direction: row; align-items: center; gap: 10px; font-size: 14px; color: var(--muted-foreground); }\n.dz-kiln-clay-booking .chk input { width: 16px; height: 16px; accent-color: var(--primary); }\n.dz-kiln-clay-booking .bn { background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); background: var(--secondary); align-self: start; padding: 20px; }\n.dz-kiln-clay-booking .wh { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0 12px; }\n.dz-kiln-clay-booking .wh i { aspect-ratio: 1; border-radius: 50%; border: var(--pv-bw) solid var(--border); background: var(--card); display: block; }\n.dz-kiln-clay-booking .wh .x { background: color-mix(in srgb, var(--foreground) 16%, transparent); border-color: transparent; }\n.dz-kiln-clay-booking .wh .y { background: var(--accent); border-color: var(--accent); }\n.dz-kiln-clay-booking .m { display: block; font-size: 12.5px; line-height: 1.5; color: var(--muted-foreground); }\n.dz-kiln-clay-booking .lgd { display: flex; gap: 14px; padding-top: 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-kiln-clay-booking .lgd span { display: inline-flex; align-items: center; gap: 6px; }\n.dz-kiln-clay-booking .lgd i { width: 11px; height: 11px; border-radius: 50%; display: block; }\n.dz-kiln-clay-booking .k1 { border: var(--pv-bw) solid var(--border); background: var(--card) } .dz-kiln-clay-booking .k2 { background: color-mix(in srgb, var(--foreground) 16%, transparent) } .dz-kiln-clay-booking .k3 { background: var(--accent) }\n.dz-kiln-clay-booking .sm { grid-column: 1 / -1; background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); display: flex; align-items: center; gap: 22px; padding: 16px 22px; margin-top: 26px; }\n.dz-kiln-clay-booking .sm b { font-family: var(--pv-mono); font-size: 28px; display: block; }\n.dz-kiln-clay-booking .sm .m { flex: 1; }\n.dz-kiln-clay-booking .go { font: inherit; font-size: 15px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--pv-radius-md); padding: 13px 26px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-kiln-clay-booking *, .dz-kiln-clay-booking *::before, .dz-kiln-clay-booking *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/kiln-clay.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&family=Karla:wght@400;500;600;700&family=Space+Mono:wght@400;500;600;700&display=swap"
}