{
  "id": "signal-pop-checkout",
  "name": "Checkout",
  "theme": "signal-pop",
  "category": "Commerce",
  "description": "A one-page checkout where every step is visible at once and the pay button restates the total so it can never be a surprise.",
  "layout": "Two columns at 1fr/300px: three numbered sections stacked on the left with no accordion collapsing, and a sticky order block on the right whose button carries the amount.",
  "modules": [
    {
      "key": "steps",
      "name": "Checkout sections",
      "html": "\n<div class=\"cs\">\n  <section><h2><span>1</span> Where is it going?</h2><div class=\"fs\"><div class=\"f wide\"><label for=\"sp-co-name\">Name</label><input id=\"sp-co-name\" type=\"text\" value=\"Tunde Adeyemi\" autocomplete=\"name\"></div><div class=\"f wide\"><label for=\"sp-co-addr\">Address</label><input id=\"sp-co-addr\" type=\"text\" value=\"18 Beckett Road\" autocomplete=\"street-address\"></div><div class=\"f\"><label for=\"sp-co-city\">City</label><input id=\"sp-co-city\" type=\"text\" value=\"Leeds\"></div><div class=\"f\"><label for=\"sp-co-pc\">Postcode</label><input id=\"sp-co-pc\" type=\"text\" value=\"LS9 8AA\" autocomplete=\"postal-code\"></div></div></section>\n  <section><h2><span>2</span> How fast?</h2><div class=\"ships\"><label class=\"sp on\"><input type=\"radio\" name=\"sp-co-ship\" checked><b>Tuesday post</b><span>3–5 days · free</span></label><label class=\"sp\"><input type=\"radio\" name=\"sp-co-ship\"><b>Tracked 24</b><span>Next working day · £4.80</span></label></div></section>\n  <section><h2><span>3</span> Pay</h2><div class=\"pays\"><button type=\"button\" class=\"pw\">Apple Pay</button><button type=\"button\" class=\"pw\">Google Pay</button></div><div class=\"or\"><span>or card</span></div><div class=\"fs\"><div class=\"f wide\"><label for=\"sp-co-card\">Card number</label><input id=\"sp-co-card\" type=\"text\" inputmode=\"numeric\" placeholder=\"0000 0000 0000 0000\" autocomplete=\"cc-number\"></div><div class=\"f\"><label for=\"sp-co-exp\">Expiry</label><input id=\"sp-co-exp\" type=\"text\" placeholder=\"MM/YY\" autocomplete=\"cc-exp\"></div><div class=\"f\"><label for=\"sp-co-cvc\">CVC</label><input id=\"sp-co-cvc\" type=\"text\" inputmode=\"numeric\" autocomplete=\"cc-csc\"></div></div></section>\n</div>"
    },
    {
      "key": "order",
      "name": "Order block",
      "html": "\n<aside class=\"od\">\n  <h3>Your bag</h3>\n  <ul><li><img src=\"{{ART product}}\" alt=\"{{ARTALT product}}\"><div><b>Streak Tee</b><span>M · ×1</span></div><em>£24</em></li><li><img src=\"{{ART sticker}}\" alt=\"{{ARTALT sticker}}\"><div><b>Sticker Pack</b><span>Set of 8 · ×1</span></div><em>£12</em></li></ul>\n  <dl><div><dt>Items</dt><dd>£36.00</dd></div><div><dt>Postage</dt><dd>Free</dd></div></dl>\n  <div class=\"tt\"><span>Total</span><b>£36.00</b></div>\n  <button type=\"button\" class=\"pay\">Pay £36.00</button>\n  <p class=\"sf\">Card details go straight to our processor. We never see them.</p>\n</aside>"
    },
    {
      "key": "trust",
      "name": "Trust strip",
      "html": "\n<footer class=\"tr\"><span>30-day returns</span><span>We pay return postage</span><span>No account needed</span><span>Real person on support</span></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "signal-pop-checkout",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:54:10+09:00",
    "updatedAt": "2026-08-29T18:54:10+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/signal-pop-checkout.json",
  "structure": "Two columns at 1fr/300px: three numbered sections stacked on the left with no accordion collapsing, and a sticky order block on the right whose button carries the amount.",
  "html": "<div class=\"dz dz-signal-pop-checkout\" data-design=\"signal-pop-checkout\" data-theme=\"signal-pop\">\n<div class=\"cols\"><section class=\"dz-mod\" data-mod=\"steps\" aria-label=\"Checkout sections\">\n<div class=\"cs\">\n  <section><h2><span>1</span> Where is it going?</h2><div class=\"fs\"><div class=\"f wide\"><label for=\"sp-co-name\">Name</label><input id=\"sp-co-name\" type=\"text\" value=\"Tunde Adeyemi\" autocomplete=\"name\"></div><div class=\"f wide\"><label for=\"sp-co-addr\">Address</label><input id=\"sp-co-addr\" type=\"text\" value=\"18 Beckett Road\" autocomplete=\"street-address\"></div><div class=\"f\"><label for=\"sp-co-city\">City</label><input id=\"sp-co-city\" type=\"text\" value=\"Leeds\"></div><div class=\"f\"><label for=\"sp-co-pc\">Postcode</label><input id=\"sp-co-pc\" type=\"text\" value=\"LS9 8AA\" autocomplete=\"postal-code\"></div></div></section>\n  <section><h2><span>2</span> How fast?</h2><div class=\"ships\"><label class=\"sp on\"><input type=\"radio\" name=\"sp-co-ship\" checked><b>Tuesday post</b><span>3–5 days · free</span></label><label class=\"sp\"><input type=\"radio\" name=\"sp-co-ship\"><b>Tracked 24</b><span>Next working day · £4.80</span></label></div></section>\n  <section><h2><span>3</span> Pay</h2><div class=\"pays\"><button type=\"button\" class=\"pw\">Apple Pay</button><button type=\"button\" class=\"pw\">Google Pay</button></div><div class=\"or\"><span>or card</span></div><div class=\"fs\"><div class=\"f wide\"><label for=\"sp-co-card\">Card number</label><input id=\"sp-co-card\" type=\"text\" inputmode=\"numeric\" placeholder=\"0000 0000 0000 0000\" autocomplete=\"cc-number\"></div><div class=\"f\"><label for=\"sp-co-exp\">Expiry</label><input id=\"sp-co-exp\" type=\"text\" placeholder=\"MM/YY\" autocomplete=\"cc-exp\"></div><div class=\"f\"><label for=\"sp-co-cvc\">CVC</label><input id=\"sp-co-cvc\" type=\"text\" inputmode=\"numeric\" autocomplete=\"cc-csc\"></div></div></section>\n</div></section><section class=\"dz-mod\" data-mod=\"order\" aria-label=\"Order block\">\n<aside class=\"od\">\n  <h3>Your bag</h3>\n  <ul><li><img src=\"https://designlookbook.dev/assets/img/signal-pop-product.webp\" alt=\"A bright orange object on a cream backdrop with a hard shadow\"><div><b>Streak Tee</b><span>M · ×1</span></div><em>£24</em></li><li><img src=\"https://designlookbook.dev/assets/img/signal-pop-sticker.webp\" alt=\"A pile of glossy die-cut stickers in orange and blue\"><div><b>Sticker Pack</b><span>Set of 8 · ×1</span></div><em>£12</em></li></ul>\n  <dl><div><dt>Items</dt><dd>£36.00</dd></div><div><dt>Postage</dt><dd>Free</dd></div></dl>\n  <div class=\"tt\"><span>Total</span><b>£36.00</b></div>\n  <button type=\"button\" class=\"pay\">Pay £36.00</button>\n  <p class=\"sf\">Card details go straight to our processor. We never see them.</p>\n</aside></section></div><section class=\"dz-mod\" data-mod=\"trust\" aria-label=\"Trust strip\">\n<footer class=\"tr\"><span>30-day returns</span><span>We pay return postage</span><span>No account needed</span><span>Real person on support</span></footer></section>\n</div>",
  "css": "\n.dz-signal-pop-checkout { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px 30px 28px; }\n.dz-signal-pop-checkout .cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }\n.dz-signal-pop-checkout .cs section { border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); padding: 18px 20px 20px; margin-bottom: 18px; }\n.dz-signal-pop-checkout .cs h2 { display: flex; align-items: center; gap: 12px; font-family: var(--pv-display); font-size: 20px; text-transform: uppercase; margin: 0 0 16px; }\n.dz-signal-pop-checkout .cs h2 span { display: grid; place-items: center; width: 32px; height: 32px; border: var(--pv-bw) solid var(--foreground); border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font-size: 15px; }\n.dz-signal-pop-checkout .fs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }\n.dz-signal-pop-checkout .f { display: flex; flex-direction: column; gap: 6px; }\n.dz-signal-pop-checkout .f.wide { grid-column: 1 / -1; }\n.dz-signal-pop-checkout .f label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }\n.dz-signal-pop-checkout .f input { font: inherit; font-size: 15px; padding: 12px 14px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-sm); background: var(--background); color: var(--foreground); }\n.dz-signal-pop-checkout .f input:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }\n.dz-signal-pop-checkout .ships { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }\n.dz-signal-pop-checkout .sp { display: block; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); padding: 13px 15px; cursor: pointer; transition: background var(--dur) var(--ease); }\n.dz-signal-pop-checkout .sp.on { background: var(--accent); }\n.dz-signal-pop-checkout .sp input { accent-color: var(--primary); margin-bottom: 6px; }\n.dz-signal-pop-checkout .sp b { display: block; font-size: 15px; }\n.dz-signal-pop-checkout .sp span { font-size: 12.5px; color: var(--muted-foreground); }\n.dz-signal-pop-checkout .pays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }\n.dz-signal-pop-checkout .pw { font: inherit; font-family: var(--pv-display); font-size: 15px; text-transform: uppercase; padding: 13px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-sm); background: var(--foreground); color: var(--background); cursor: pointer; }\n.dz-signal-pop-checkout .or { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-signal-pop-checkout .or::before, .dz-signal-pop-checkout .or::after { content: \"\"; flex: 1; height: var(--pv-bw); background: var(--foreground); }\n.dz-signal-pop-checkout .od { position: sticky; top: 0; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); background: var(--accent); padding: 18px 20px; }\n.dz-signal-pop-checkout .od h3 { font-family: var(--pv-display); font-size: 18px; text-transform: uppercase; margin: 0 0 14px; color: var(--accent-foreground); }\n.dz-signal-pop-checkout .od ul { list-style: none; margin: 0 0 14px; padding: 0; }\n.dz-signal-pop-checkout .od li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: var(--pv-bw) solid var(--foreground); }\n.dz-signal-pop-checkout .od img { width: 46px; height: 46px; object-fit: cover; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-sm); filter: var(--img-filter); }\n.dz-signal-pop-checkout .od b { display: block; font-size: 14px; }\n.dz-signal-pop-checkout .od li span { font-size: 12px; color: var(--muted-foreground); }\n.dz-signal-pop-checkout .od em { margin-left: auto; font-style: normal; font-family: var(--pv-display); font-size: 16px; }\n.dz-signal-pop-checkout .od dl { margin: 0 0 10px; }\n.dz-signal-pop-checkout .od dl > div { display: flex; justify-content: space-between; font-size: 13.5px; padding: 4px 0; }\n.dz-signal-pop-checkout .od dt { color: var(--muted-foreground); }\n.dz-signal-pop-checkout .od dd { margin: 0; }\n.dz-signal-pop-checkout .tt { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 14px; border-top: var(--pv-bw) solid var(--foreground); }\n.dz-signal-pop-checkout .tt span { font-size: 13px; font-weight: 700; text-transform: uppercase; }\n.dz-signal-pop-checkout .tt b { font-family: var(--pv-display); font-size: 28px; }\n.dz-signal-pop-checkout .pay { width: 100%; font: inherit; font-family: var(--pv-display); font-size: 18px; text-transform: uppercase; padding: 15px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); background: var(--primary); color: var(--primary-foreground); box-shadow: 6px 6px 0 var(--foreground); cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-signal-pop-checkout .pay:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--foreground); }\n.dz-signal-pop-checkout .sf { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--accent-foreground); }\n.dz-signal-pop-checkout .tr { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }\n.dz-signal-pop-checkout .tr span { border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-xl); background: var(--card); font-size: 12.5px; font-weight: 700; padding: 6px 14px; }\n@media (prefers-reduced-motion: reduce) { .dz-signal-pop-checkout *, .dz-signal-pop-checkout *::before, .dz-signal-pop-checkout *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/signal-pop.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Archivo+Black:wght@400;500;600;700&family=Archivo:wght@400;500;600;700&family=Space+Mono:wght@400;500;600;700&display=swap"
}