{
  "id": "ticket-stub-times",
  "name": "Departure Search",
  "theme": "ticket-stub",
  "category": "Search & Browse",
  "description": "A departure search where each result is a half-stub — enough of the ticket shape to be recognisable, without pretending to be a ticket you already hold.",
  "layout": "A query bar over a list of notched half-stubs with the time on the long side and the fare and platform on the short side.",
  "modules": [
    {
      "key": "query",
      "name": "Journey query",
      "html": "\n<header class=\"jq\"><div class=\"two\"><label><span class=\"lb\">From</span><input type=\"text\" value=\"Aberdeen\"></label><label><span class=\"lb\">To</span><input type=\"text\" value=\"Inverness\"></label></div><div class=\"two\"><label><span class=\"lb\">Date</span><input type=\"text\" value=\"Thu 11 June\"></label><label><span class=\"lb\">Leave after</span><input type=\"text\" value=\"13:00\"></label></div><button type=\"button\" class=\"pri\">Search</button></header>"
    },
    {
      "key": "results",
      "name": "Departure stubs",
      "html": "\n<section class=\"ds\">\n  <article class=\"stub\" style=\"--px:74%\"><div class=\"lg\"><div class=\"tm\"><b>13:14</b><span class=\"ar\">→ 15:32</span><span class=\"du\">2h 18m · direct</span></div><span class=\"op\">Operated by Northern Rail · Coach C has 11 seats free</span></div><div class=\"sm\"><span class=\"lb\">Platform</span><span class=\"cd\">6</span><span class=\"fr\">£38.40</span></div></article>\n  <article class=\"stub best\" style=\"--px:74%\"><div class=\"lg\"><div class=\"tm\"><b>14:32</b><span class=\"ar\">→ 16:11</span><span class=\"du\">1h 39m · direct</span></div><span class=\"op\">Fastest today. Reservation included at no charge.</span></div><div class=\"sm\"><span class=\"lb\">Platform</span><span class=\"cd\">6</span><span class=\"fr\">£38.40</span></div></article>\n  <article class=\"stub\" style=\"--px:74%\"><div class=\"lg\"><div class=\"tm\"><b>15:06</b><span class=\"ar\">→ 17:44</span><span class=\"du\">2h 38m · change at Elgin</span></div><span class=\"op\">14 minutes to change. Step-free at both platforms.</span></div><div class=\"sm\"><span class=\"lb\">Platform</span><span class=\"cd\">3</span><span class=\"fr\">£28.10</span></div></article>\n  <article class=\"stub sold\" style=\"--px:74%\"><div class=\"lg\"><div class=\"tm\"><b>16:20</b><span class=\"ar\">→ 17:59</span><span class=\"du\">1h 39m · direct</span></div><span class=\"op\">Reservations full. Standing room only from Aberdeen.</span></div><div class=\"sm\"><span class=\"lb\">Platform</span><span class=\"cd\">6</span><span class=\"fr\">£38.40</span></div></article>\n</section>"
    },
    {
      "key": "note",
      "name": "Fare note",
      "html": "\n<footer class=\"fn2\"><p><b>Cheaper on a different day.</b> The same journey on Wednesday is £22.90 in advance. Advance fares stop being sold at 23:59 the night before travel.</p></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "ticket-stub-times",
    "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-times.json",
  "structure": "A query bar over a list of notched half-stubs with the time on the long side and the fare and platform on the short side.",
  "html": "<div class=\"dz dz-ticket-stub-times\" data-design=\"ticket-stub-times\" data-theme=\"ticket-stub\">\n<section class=\"dz-mod\" data-mod=\"query\" aria-label=\"Journey query\">\n<header class=\"jq\"><div class=\"two\"><label><span class=\"lb\">From</span><input type=\"text\" value=\"Aberdeen\"></label><label><span class=\"lb\">To</span><input type=\"text\" value=\"Inverness\"></label></div><div class=\"two\"><label><span class=\"lb\">Date</span><input type=\"text\" value=\"Thu 11 June\"></label><label><span class=\"lb\">Leave after</span><input type=\"text\" value=\"13:00\"></label></div><button type=\"button\" class=\"pri\">Search</button></header></section>\n<section class=\"dz-mod\" data-mod=\"results\" aria-label=\"Departure stubs\">\n<section class=\"ds\">\n  <article class=\"stub\" style=\"--px:74%\"><div class=\"lg\"><div class=\"tm\"><b>13:14</b><span class=\"ar\">→ 15:32</span><span class=\"du\">2h 18m · direct</span></div><span class=\"op\">Operated by Northern Rail · Coach C has 11 seats free</span></div><div class=\"sm\"><span class=\"lb\">Platform</span><span class=\"cd\">6</span><span class=\"fr\">£38.40</span></div></article>\n  <article class=\"stub best\" style=\"--px:74%\"><div class=\"lg\"><div class=\"tm\"><b>14:32</b><span class=\"ar\">→ 16:11</span><span class=\"du\">1h 39m · direct</span></div><span class=\"op\">Fastest today. Reservation included at no charge.</span></div><div class=\"sm\"><span class=\"lb\">Platform</span><span class=\"cd\">6</span><span class=\"fr\">£38.40</span></div></article>\n  <article class=\"stub\" style=\"--px:74%\"><div class=\"lg\"><div class=\"tm\"><b>15:06</b><span class=\"ar\">→ 17:44</span><span class=\"du\">2h 38m · change at Elgin</span></div><span class=\"op\">14 minutes to change. Step-free at both platforms.</span></div><div class=\"sm\"><span class=\"lb\">Platform</span><span class=\"cd\">3</span><span class=\"fr\">£28.10</span></div></article>\n  <article class=\"stub sold\" style=\"--px:74%\"><div class=\"lg\"><div class=\"tm\"><b>16:20</b><span class=\"ar\">→ 17:59</span><span class=\"du\">1h 39m · direct</span></div><span class=\"op\">Reservations full. Standing room only from Aberdeen.</span></div><div class=\"sm\"><span class=\"lb\">Platform</span><span class=\"cd\">6</span><span class=\"fr\">£38.40</span></div></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"Fare note\">\n<footer class=\"fn2\"><p><b>Cheaper on a different day.</b> The same journey on Wednesday is £22.90 in advance. Advance fares stop being sold at 23:59 the night before travel.</p></footer></section>\n</div>",
  "css": "\n.dz-ticket-stub-times { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 26px 28px; max-width: 880px; margin: 0 auto; }\n.dz-ticket-stub-times .lb { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-ticket-stub-times .jq { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }\n.dz-ticket-stub-times .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n.dz-ticket-stub-times input { display: block; width: 100%; margin-top: 5px; padding: 11px; font: inherit; font-size: 14px; background: var(--card); border: 1px solid var(--input); border-radius: var(--pv-radius-sm); color: var(--foreground); }\n.dz-ticket-stub-times .pri { font: inherit; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); background: var(--primary); color: var(--primary-foreground); border: 0; padding: 14px 24px; border-radius: var(--pv-radius-sm); cursor: pointer; }\n.dz-ticket-stub-times .stub { display: grid; grid-template-columns: 74% 26%; 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-bottom: 12px; }\n.dz-ticket-stub-times .best { border-color: var(--primary); border-width: 2px; }\n.dz-ticket-stub-times .lg { padding: 16px 20px; }\n.dz-ticket-stub-times .tm { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }\n.dz-ticket-stub-times .tm b { font-family: var(--pv-display); font-weight: 600; font-size: 34px; }\n.dz-ticket-stub-times .ar { font-family: var(--pv-mono); font-size: 17px; color: var(--muted-foreground); }\n.dz-ticket-stub-times .du { font-size: 13px; color: var(--muted-foreground); }\n.dz-ticket-stub-times .op { font-size: 13px; color: var(--muted-foreground); }\n.dz-ticket-stub-times .sm { padding: 16px 20px; border-left: 1px dashed var(--border); display: grid; align-content: center; gap: 6px; text-align: right; }\n.dz-ticket-stub-times .sm .lb { text-align: right; }\n.dz-ticket-stub-times .cd { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .04em; font-size: 22px; }\n.dz-ticket-stub-times .fr { font-family: var(--pv-mono); font-size: 15px; }\n.dz-ticket-stub-times .sold { opacity: .62; }\n.dz-ticket-stub-times .fn2 { margin-top: 18px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--pv-radius); }\n.dz-ticket-stub-times .fn2 p { margin: 0; font-size: 13.5px; line-height: 1.55; }\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"
}