{
  "id": "ticket-stub-checkin",
  "name": "Check-In",
  "theme": "ticket-stub",
  "category": "Auth & Onboarding",
  "description": "A check-in flow where the stub is assembled in front of you as you answer, so by the last step you are looking at the thing you are about to receive.",
  "layout": "A 460px form column beside a live stub preview that gains fields as they are filled, with the code half staying blank until the final step.",
  "modules": [
    {
      "key": "steps",
      "name": "Step rail",
      "html": "\n<nav class=\"sr\"><ol><li class=\"done\"><b>1</b>Reference</li><li class=\"done\"><b>2</b>Passenger</li><li class=\"on\"><b>3</b>Seat</li><li><b>4</b>Issue</li></ol></nav>"
    },
    {
      "key": "form",
      "name": "Check-in form",
      "html": "\n<form class=\"cf\"><h1>Choose a seat</h1><p class=\"sub\">Coach C has eleven seats free. Table seats are shown with a dot.</p>\n<div class=\"coach\"><span class=\"cl2\">Coach C</span><div class=\"seats\">\n  <i class=\"s\"></i><i class=\"s t\"></i><i class=\"s gone\"></i><i class=\"s\"></i><i class=\"s gone\"></i><i class=\"s\"></i>\n  <i class=\"s gone\"></i><i class=\"s\"></i><i class=\"s t sel\"></i><i class=\"s gone\"></i><i class=\"s\"></i><i class=\"s t\"></i>\n  <i class=\"s\"></i><i class=\"s gone\"></i><i class=\"s\"></i><i class=\"s\"></i><i class=\"s gone\"></i><i class=\"s\"></i>\n</div><ul class=\"key\"><li><i class=\"s\"></i>Free</li><li><i class=\"s t\"></i>Table</li><li><i class=\"s gone\"></i>Taken</li><li><i class=\"s sel\"></i>Yours</li></ul></div>\n<label class=\"pref\"><input type=\"checkbox\" checked> Prefer a forward-facing seat when one is available on future journeys</label>\n<div class=\"ac\"><button type=\"button\" class=\"pri\">Continue to issue</button><button type=\"button\" class=\"sec\">Back</button></div></form>"
    },
    {
      "key": "preview",
      "name": "Stub preview",
      "html": "\n<aside class=\"pv\"><span class=\"lb\">Your ticket, so far</span>\n<article class=\"stub\" style=\"--px:66%\"><div class=\"lg\"><span class=\"lb\">Departs 14:32 · Platform 6</span><h2>Aberdeen → Inverness</h2><ul class=\"mt\"><li><span class=\"lb\">Passenger</span><b>K. Oyelaran</b></li><li><span class=\"lb\">Coach</span><b>C</b></li><li><span class=\"lb\">Seat</span><b class=\"new\">41A</b></li><li><span class=\"lb\">Class</span><b>Standard</b></li></ul></div>\n<div class=\"sm pending\"><span class=\"lb\">Reference</span><span class=\"cd\">— — —</span><span class=\"wt\">Issued at the last step</span></div></article>\n<p class=\"nt\">The reference is generated when the ticket is issued and cannot be reserved in advance.</p></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "ticket-stub-checkin",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T23:46:02+09:00",
    "updatedAt": "2026-09-01T23:46:02+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/ticket-stub-checkin.json",
  "structure": "A 460px form column beside a live stub preview that gains fields as they are filled, with the code half staying blank until the final step.",
  "html": "<div class=\"dz dz-ticket-stub-checkin\" data-design=\"ticket-stub-checkin\" data-theme=\"ticket-stub\">\n<section class=\"dz-mod\" data-mod=\"steps\" aria-label=\"Step rail\">\n<nav class=\"sr\"><ol><li class=\"done\"><b>1</b>Reference</li><li class=\"done\"><b>2</b>Passenger</li><li class=\"on\"><b>3</b>Seat</li><li><b>4</b>Issue</li></ol></nav></section><div class=\"cols\"><section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Check-in form\">\n<form class=\"cf\"><h1>Choose a seat</h1><p class=\"sub\">Coach C has eleven seats free. Table seats are shown with a dot.</p>\n<div class=\"coach\"><span class=\"cl2\">Coach C</span><div class=\"seats\">\n  <i class=\"s\"></i><i class=\"s t\"></i><i class=\"s gone\"></i><i class=\"s\"></i><i class=\"s gone\"></i><i class=\"s\"></i>\n  <i class=\"s gone\"></i><i class=\"s\"></i><i class=\"s t sel\"></i><i class=\"s gone\"></i><i class=\"s\"></i><i class=\"s t\"></i>\n  <i class=\"s\"></i><i class=\"s gone\"></i><i class=\"s\"></i><i class=\"s\"></i><i class=\"s gone\"></i><i class=\"s\"></i>\n</div><ul class=\"key\"><li><i class=\"s\"></i>Free</li><li><i class=\"s t\"></i>Table</li><li><i class=\"s gone\"></i>Taken</li><li><i class=\"s sel\"></i>Yours</li></ul></div>\n<label class=\"pref\"><input type=\"checkbox\" checked> Prefer a forward-facing seat when one is available on future journeys</label>\n<div class=\"ac\"><button type=\"button\" class=\"pri\">Continue to issue</button><button type=\"button\" class=\"sec\">Back</button></div></form></section><section class=\"dz-mod\" data-mod=\"preview\" aria-label=\"Stub preview\">\n<aside class=\"pv\"><span class=\"lb\">Your ticket, so far</span>\n<article class=\"stub\" style=\"--px:66%\"><div class=\"lg\"><span class=\"lb\">Departs 14:32 · Platform 6</span><h2>Aberdeen → Inverness</h2><ul class=\"mt\"><li><span class=\"lb\">Passenger</span><b>K. Oyelaran</b></li><li><span class=\"lb\">Coach</span><b>C</b></li><li><span class=\"lb\">Seat</span><b class=\"new\">41A</b></li><li><span class=\"lb\">Class</span><b>Standard</b></li></ul></div>\n<div class=\"sm pending\"><span class=\"lb\">Reference</span><span class=\"cd\">— — —</span><span class=\"wt\">Issued at the last step</span></div></article>\n<p class=\"nt\">The reference is generated when the ticket is issued and cannot be reserved in advance.</p></aside></section></div>\n</div>",
  "css": "\n.dz-ticket-stub-checkin { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 26px 28px; }\n.dz-ticket-stub-checkin .lb { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-ticket-stub-checkin .sr ol { list-style: none; display: flex; gap: 8px; margin: 0 0 24px; padding: 0; }\n.dz-ticket-stub-checkin .sr li { display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--pv-radius-sm); }\n.dz-ticket-stub-checkin .sr li.on { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }\n.dz-ticket-stub-checkin .sr li.done { color: var(--foreground); }\n.dz-ticket-stub-checkin .sr b { font-family: var(--pv-mono); }\n.dz-ticket-stub-checkin .cols { display: grid; grid-template-columns: 460px 1fr; gap: 34px; align-items: start; }\n.dz-ticket-stub-checkin h1 { font-family: var(--pv-display); font-weight: 600; font-size: 34px; margin: 0 0 6px; }\n.dz-ticket-stub-checkin .sub { margin: 0 0 20px; font-size: 14px; color: var(--muted-foreground); }\n.dz-ticket-stub-checkin .coach { border: 1px solid var(--border); border-radius: var(--pv-radius); padding: 18px; margin-bottom: 18px; }\n.dz-ticket-stub-checkin .cl2 { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); display: block; margin-bottom: 12px; }\n.dz-ticket-stub-checkin .seats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }\n.dz-ticket-stub-checkin .s { height: 30px; border-radius: var(--pv-radius-sm); background: var(--secondary); display: block; }\n.dz-ticket-stub-checkin .s.t { background: var(--secondary); border: 1px solid var(--border); position: relative; }\n.dz-ticket-stub-checkin .s.t::after { content: \"\"; position: absolute; inset: auto 50% 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--muted-foreground); }\n.dz-ticket-stub-checkin .s.gone { background: var(--muted); opacity: .5; }\n.dz-ticket-stub-checkin .s.sel { background: var(--primary); }\n.dz-ticket-stub-checkin .key { list-style: none; display: flex; gap: 16px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); }\n.dz-ticket-stub-checkin .key li { display: flex; align-items: center; gap: 7px; }\n.dz-ticket-stub-checkin .key .s { width: 20px; height: 14px; }\n.dz-ticket-stub-checkin .pref { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; margin-bottom: 20px; }\n.dz-ticket-stub-checkin .ac { display: flex; gap: 10px; }\n.dz-ticket-stub-checkin button { font: inherit; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); padding: 13px 22px; border-radius: var(--pv-radius-sm); cursor: pointer; }\n.dz-ticket-stub-checkin .pri { background: var(--primary); color: var(--primary-foreground); border: 0; }\n.dz-ticket-stub-checkin .sec { background: transparent; color: var(--foreground); border: 1px solid var(--border); }\n.dz-ticket-stub-checkin .stub { display: grid; grid-template-columns: 66% 34%; border: 1px solid var(--border); border-radius: var(--pv-radius); background:\n  radial-gradient(circle 7px at var(--px) 0, transparent 98%, var(--card) 100%),\n  radial-gradient(circle 7px at var(--px) 100%, transparent 98%, var(--card) 100%),\n  var(--card); overflow: hidden; margin: 10px 0 12px; }\n.dz-ticket-stub-checkin .lg { padding: 18px 20px; }\n.dz-ticket-stub-checkin .stub h2 { font-family: var(--pv-display); font-weight: 600; font-size: 21px; margin: 6px 0 14px; }\n.dz-ticket-stub-checkin .mt { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; padding: 0; }\n.dz-ticket-stub-checkin .mt b { font-family: var(--pv-mono); font-size: 14px; }\n.dz-ticket-stub-checkin .new { color: var(--primary); }\n.dz-ticket-stub-checkin .sm { padding: 18px 20px; border-left: 1px dashed var(--border); display: grid; align-content: start; gap: 8px; }\n.dz-ticket-stub-checkin .cd { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .04em; }\n.dz-ticket-stub-checkin .pending .cd { color: var(--muted-foreground); }\n.dz-ticket-stub-checkin .wt { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); }\n.dz-ticket-stub-checkin .nt { font-size: 12.5px; color: var(--muted-foreground); margin: 0; }\n",
  "requiredTheme": "/api/v1/themes/ticket-stub.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Khand:wght@400;500;600;700&family=Asap:wght@400;500;600;700&family=Overpass+Mono:wght@400;500;600;700&display=swap"
}