{
  "id": "ticket-stub-wallet",
  "name": "Ticket Wallet",
  "theme": "ticket-stub",
  "category": "Commerce",
  "description": "A wallet of live and spent tickets where the perforation is real — the code half is visually separated from the detail half so a barcode is never read as prose.",
  "layout": "A single column of 1px-bordered stubs at 880px, each split 68/32 by a dashed rule with semicircular notches, spent ones shown separated by 6px.",
  "modules": [
    {
      "key": "head",
      "name": "Wallet head",
      "html": "\n<header class=\"wh\"><h1>Your tickets</h1><div class=\"seg\"><button type=\"button\" class=\"on\">Live <b>2</b></button><button type=\"button\">Used <b>14</b></button><button type=\"button\">Transferred <b>1</b></button></div></header>"
    },
    {
      "key": "live",
      "name": "Live stubs",
      "html": "\n<section class=\"ws\">\n  <article class=\"stub\" style=\"--px:68%\"><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>41A</b></li><li><span class=\"lb\">Class</span><b>Standard</b></li></ul></div>\n  <div class=\"sm\"><span class=\"lb\">Reference</span><span class=\"cd\">QJ4 8LM 2210</span><div class=\"bars\" aria-hidden=\"true\"></div><span class=\"ok\">Valid</span></div></article>\n\n  <article class=\"stub\" style=\"--px:68%\"><div class=\"lg\"><span class=\"lb\">Doors 19:00 · Entrance B</span><h2>Marlowe Playhouse · A Number</h2><ul class=\"mt\"><li><span class=\"lb\">Holder</span><b>K. Oyelaran</b></li><li><span class=\"lb\">Row</span><b>A</b></li><li><span class=\"lb\">Seats</span><b>3, 4</b></li><li><span class=\"lb\">Type</span><b>Member</b></li></ul></div>\n  <div class=\"sm\"><span class=\"lb\">Reference</span><span class=\"cd\">MP7 2210 0034</span><div class=\"bars\" aria-hidden=\"true\"></div><span class=\"ok\">Valid</span></div></article>\n</section>"
    },
    {
      "key": "used",
      "name": "Used stub",
      "html": "\n<section class=\"ws used\"><span class=\"ct\">Used</span>\n  <article class=\"stub torn\" style=\"--px:68%\"><div class=\"lg\"><span class=\"lb\">Scanned 08:14, 04 June</span><h2>Aberdeen → Dundee</h2><ul class=\"mt\"><li><span class=\"lb\">Passenger</span><b>K. Oyelaran</b></li><li><span class=\"lb\">Coach</span><b>B</b></li><li><span class=\"lb\">Seat</span><b>12D</b></li><li><span class=\"lb\">Class</span><b>Standard</b></li></ul></div>\n  <div class=\"sm sp\"><span class=\"lb\">Reference</span><span class=\"cd\">QJ4 8LM 1908</span><span class=\"ud\">Used</span></div></article>\n</section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "ticket-stub-wallet",
    "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-wallet.json",
  "structure": "A single column of 1px-bordered stubs at 880px, each split 68/32 by a dashed rule with semicircular notches, spent ones shown separated by 6px.",
  "html": "<div class=\"dz dz-ticket-stub-wallet\" data-design=\"ticket-stub-wallet\" data-theme=\"ticket-stub\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Wallet head\">\n<header class=\"wh\"><h1>Your tickets</h1><div class=\"seg\"><button type=\"button\" class=\"on\">Live <b>2</b></button><button type=\"button\">Used <b>14</b></button><button type=\"button\">Transferred <b>1</b></button></div></header></section>\n<section class=\"dz-mod\" data-mod=\"live\" aria-label=\"Live stubs\">\n<section class=\"ws\">\n  <article class=\"stub\" style=\"--px:68%\"><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>41A</b></li><li><span class=\"lb\">Class</span><b>Standard</b></li></ul></div>\n  <div class=\"sm\"><span class=\"lb\">Reference</span><span class=\"cd\">QJ4 8LM 2210</span><div class=\"bars\" aria-hidden=\"true\"></div><span class=\"ok\">Valid</span></div></article>\n\n  <article class=\"stub\" style=\"--px:68%\"><div class=\"lg\"><span class=\"lb\">Doors 19:00 · Entrance B</span><h2>Marlowe Playhouse · A Number</h2><ul class=\"mt\"><li><span class=\"lb\">Holder</span><b>K. Oyelaran</b></li><li><span class=\"lb\">Row</span><b>A</b></li><li><span class=\"lb\">Seats</span><b>3, 4</b></li><li><span class=\"lb\">Type</span><b>Member</b></li></ul></div>\n  <div class=\"sm\"><span class=\"lb\">Reference</span><span class=\"cd\">MP7 2210 0034</span><div class=\"bars\" aria-hidden=\"true\"></div><span class=\"ok\">Valid</span></div></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"used\" aria-label=\"Used stub\">\n<section class=\"ws used\"><span class=\"ct\">Used</span>\n  <article class=\"stub torn\" style=\"--px:68%\"><div class=\"lg\"><span class=\"lb\">Scanned 08:14, 04 June</span><h2>Aberdeen → Dundee</h2><ul class=\"mt\"><li><span class=\"lb\">Passenger</span><b>K. Oyelaran</b></li><li><span class=\"lb\">Coach</span><b>B</b></li><li><span class=\"lb\">Seat</span><b>12D</b></li><li><span class=\"lb\">Class</span><b>Standard</b></li></ul></div>\n  <div class=\"sm sp\"><span class=\"lb\">Reference</span><span class=\"cd\">QJ4 8LM 1908</span><span class=\"ud\">Used</span></div></article>\n</section></section>\n</div>",
  "css": "\n.dz-ticket-stub-wallet { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px; max-width: 880px; margin: 0 auto; }\n.dz-ticket-stub-wallet .wh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }\n.dz-ticket-stub-wallet h1 { font-family: var(--pv-display); font-weight: 600; font-size: 34px; margin: 0; }\n.dz-ticket-stub-wallet .seg { display: flex; gap: 6px; }\n.dz-ticket-stub-wallet .seg button { font: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); color: var(--muted-foreground); padding: 8px 14px; background: transparent; border: 1px solid var(--border); border-radius: var(--pv-radius-sm); cursor: pointer; display: flex; gap: 7px; }\n.dz-ticket-stub-wallet .seg button.on { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }\n.dz-ticket-stub-wallet .seg b { font-family: var(--pv-mono); }\n.dz-ticket-stub-wallet .ct { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); display: block; margin: 26px 0 10px; }\n.dz-ticket-stub-wallet .stub { display: grid; grid-template-columns: 68% 32%; border: 1px solid var(--border); border-radius: var(--pv-radius); margin-bottom: 16px; 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; }\n.dz-ticket-stub-wallet .lg { padding: 18px 20px; }\n.dz-ticket-stub-wallet .lb { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-ticket-stub-wallet .stub h2 { font-family: var(--pv-display); font-weight: 600; font-size: 21px; margin: 6px 0 14px; }\n.dz-ticket-stub-wallet .mt { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; padding: 0; }\n.dz-ticket-stub-wallet .mt b { font-family: var(--pv-mono); font-size: 14px; }\n.dz-ticket-stub-wallet .sm { padding: 18px 20px; border-left: 1px dashed var(--border); display: grid; align-content: start; gap: 8px; }\n.dz-ticket-stub-wallet .cd { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .04em; font-size: 15px; }\n.dz-ticket-stub-wallet .bars { height: 42px; background: repeating-linear-gradient(90deg, var(--foreground) 0 2px, transparent 2px 4px, var(--foreground) 4px 5px, transparent 5px 9px); margin: 4px 0; }\n.dz-ticket-stub-wallet .ok { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); color: var(--primary); }\n.dz-ticket-stub-wallet .ud { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); }\n.dz-ticket-stub-wallet .torn { opacity: .72; }\n.dz-ticket-stub-wallet .torn .sm { margin-left: 6px; }\n.dz-ticket-stub-wallet .sp .bars { display: none; }\n@media (prefers-reduced-motion: reduce) { .dz-ticket-stub-wallet *, .dz-ticket-stub-wallet *::before, .dz-ticket-stub-wallet *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\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"
}