{
  "id": "hotel-bell-booking",
  "name": "Booking",
  "theme": "hotel-bell",
  "category": "Commerce",
  "description": "The checkout with a sticky summary — the only elevated surface in the system — where every line item carries its own basis in Courier Prime.",
  "layout": "A basis bar, a room detail column and a sticky 360px summary card whose lines each state their basis and whose total sits under a double rule.",
  "modules": [
    {
      "key": "bar",
      "name": "Basis bar",
      "html": "\n<header class=\"bb\"><div class=\"fld\"><span class=\"k\">Check in</span><b>Fri 15 May</b></div><div class=\"fld\"><span class=\"k\">Check out</span><b>Sun 17 May</b></div><div class=\"fld\"><span class=\"k\">Nights</span><b>2</b></div><div class=\"fld\"><span class=\"k\">Guests</span><b>2 adults</b></div></header>"
    },
    {
      "key": "room",
      "name": "Room detail",
      "html": "\n<section class=\"rd\"><figure><img src=\"{{ART bed}}\" alt=\"{{ARTALT bed}}\"></figure><span class=\"k\">Second floor · corner</span><h1>Corner Room</h1><p>Two tall windows on the corner, a bath and a separate shower, and a bed that faces the wrong way for the light — which we have been told about and have not changed, because moving it blocks the second window.</p><div class=\"am\"><span>28 m²</span><span>Two aspects</span><span>Bath and shower</span><span>King</span></div></section>"
    },
    {
      "key": "sum",
      "name": "Sticky summary",
      "html": "\n<aside class=\"sm\"><span class=\"k\">Your stay</span><div class=\"ln\"><span>Room, Corner Room</span><span class=\"pz\"><span class=\"fig sm2\">£420</span><span class=\"bs\">£210 PER NIGHT · 2 NIGHTS</span></span></div><div class=\"ln\"><span>Breakfast</span><span class=\"pz\"><span class=\"fig sm2\">£36</span><span class=\"bs\">£9 PER GUEST PER NIGHT</span></span></div><div class=\"ln\"><span>City levy</span><span class=\"pz\"><span class=\"fig sm2\">£6</span><span class=\"bs\">£1.50 PER GUEST PER NIGHT</span></span></div><div class=\"ln tot\"><span>Total</span><span class=\"pz\"><span class=\"fig\">£462</span><span class=\"bs\">2 NIGHTS · 2 GUESTS · ALL IN</span></span></div><button class=\"pri\">Confirm and pay</button><p class=\"cn mn\">FREE CANCELLATION UNTIL 13 MAY</p></aside>"
    },
    {
      "key": "terms",
      "name": "Terms row",
      "html": "\n<footer class=\"tm\"><div><span class=\"k\">Check in</span><p class=\"mn\">FROM 15:00 · KEY COLLECTION UNTIL 23:00</p></div><div><span class=\"k\">Check out</span><p class=\"mn\">BY 11:00 · BAGS HELD FREE</p></div><div><span class=\"k\">If you cancel</span><p class=\"mn\">FULL REFUND UNTIL 13 MAY · ONE NIGHT AFTER</p></div></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "hotel-bell-booking",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:42:08+09:00",
    "updatedAt": "2026-09-02T01:42:08+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/hotel-bell-booking.json",
  "structure": "A basis bar, a room detail column and a sticky 360px summary card whose lines each state their basis and whose total sits under a double rule.",
  "html": "<div class=\"dz dz-hotel-bell-booking\" data-design=\"hotel-bell-booking\" data-theme=\"hotel-bell\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Basis bar\">\n<header class=\"bb\"><div class=\"fld\"><span class=\"k\">Check in</span><b>Fri 15 May</b></div><div class=\"fld\"><span class=\"k\">Check out</span><b>Sun 17 May</b></div><div class=\"fld\"><span class=\"k\">Nights</span><b>2</b></div><div class=\"fld\"><span class=\"k\">Guests</span><b>2 adults</b></div></header></section>\n<section class=\"dz-mod\" data-mod=\"room\" aria-label=\"Room detail\">\n<section class=\"rd\"><figure><img src=\"https://designlookbook.dev/assets/img/hotel-bell-bed.webp\" alt=\"Close view of folded white linen on a bed\"></figure><span class=\"k\">Second floor · corner</span><h1>Corner Room</h1><p>Two tall windows on the corner, a bath and a separate shower, and a bed that faces the wrong way for the light — which we have been told about and have not changed, because moving it blocks the second window.</p><div class=\"am\"><span>28 m²</span><span>Two aspects</span><span>Bath and shower</span><span>King</span></div></section></section>\n<section class=\"dz-mod\" data-mod=\"sum\" aria-label=\"Sticky summary\">\n<aside class=\"sm\"><span class=\"k\">Your stay</span><div class=\"ln\"><span>Room, Corner Room</span><span class=\"pz\"><span class=\"fig sm2\">£420</span><span class=\"bs\">£210 PER NIGHT · 2 NIGHTS</span></span></div><div class=\"ln\"><span>Breakfast</span><span class=\"pz\"><span class=\"fig sm2\">£36</span><span class=\"bs\">£9 PER GUEST PER NIGHT</span></span></div><div class=\"ln\"><span>City levy</span><span class=\"pz\"><span class=\"fig sm2\">£6</span><span class=\"bs\">£1.50 PER GUEST PER NIGHT</span></span></div><div class=\"ln tot\"><span>Total</span><span class=\"pz\"><span class=\"fig\">£462</span><span class=\"bs\">2 NIGHTS · 2 GUESTS · ALL IN</span></span></div><button class=\"pri\">Confirm and pay</button><p class=\"cn mn\">FREE CANCELLATION UNTIL 13 MAY</p></aside></section>\n<section class=\"dz-mod\" data-mod=\"terms\" aria-label=\"Terms row\">\n<footer class=\"tm\"><div><span class=\"k\">Check in</span><p class=\"mn\">FROM 15:00 · KEY COLLECTION UNTIL 23:00</p></div><div><span class=\"k\">Check out</span><p class=\"mn\">BY 11:00 · BAGS HELD FREE</p></div><div><span class=\"k\">If you cancel</span><p class=\"mn\">FULL REFUND UNTIL 13 MAY · ONE NIGHT AFTER</p></div></footer></section>\n</div>",
  "css": "\n.dz-hotel-bell-booking { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-hotel-bell-booking .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-hotel-bell-booking .mn { font-family: var(--pv-mono); font-size: 13px; }\n\n.dz-hotel-bell-booking .bb { display: flex; align-items: center; gap: 0; height: 64px; border-bottom: 1px solid var(--border); background: var(--card); }\n.dz-hotel-bell-booking .bb .fld { padding: 0 22px; border-right: 1px solid var(--border); height: 100%; display: flex; flex-direction: column; justify-content: center; }\n.dz-hotel-bell-booking .bb .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-hotel-bell-booking .bb b { font-family: var(--pv-mono); font-size: 13px; font-weight: 400; margin-top: 3px; }\n.dz-hotel-bell-booking .bb .go { margin-left: auto; margin-right: 22px; }\n.dz-hotel-bell-booking .bd { display: grid; }\n.dz-hotel-bell-booking { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }\n.dz-hotel-bell-booking .bb, .dz-hotel-bell-booking .tm { grid-column: 1 / -1; }\n.dz-hotel-bell-booking .rd { padding: 28px 0 28px 32px; }\n.dz-hotel-bell-booking .rd figure { margin: 0 0 20px; }\n.dz-hotel-bell-booking .rd img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 12px; filter: var(--img-filter); }\n.dz-hotel-bell-booking h1 { font-family: var(--pv-display); font-weight: 400; font-size: 58px; line-height: 1.08; letter-spacing: -.02em; margin: 8px 0 14px; }\n.dz-hotel-bell-booking .rd p { font-size: 16.5px; line-height: 1.64; margin: 0 0 16px; max-width: 60ch; }\n.dz-hotel-bell-booking .am { display: flex; gap: 8px; flex-wrap: wrap; }\n.dz-hotel-bell-booking .am span { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; background: var(--secondary); color: var(--muted-foreground); border-radius: 3px; padding: 6px 10px; }\n.dz-hotel-bell-booking .sm { position: sticky; top: 20px; margin: 28px 32px 0 0; background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 22px; box-shadow: 0 18px 40px -26px color-mix(in oklab, var(--foreground) 70%, transparent); }\n.dz-hotel-bell-booking .ln { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; }\n\n.dz-hotel-bell-booking .pz { display: inline-block; }\n.dz-hotel-bell-booking .pz .fig { font-family: var(--pv-display); font-weight: 400; color: var(--accent); line-height: 1; display: block; }\n.dz-hotel-bell-booking .pz .bs { font-family: var(--pv-mono); font-size: 13px; font-size: 12px; color: var(--muted-foreground); display: block; margin-top: 5px; }\n.dz-hotel-bell-booking .ln .pz { margin-left: auto; text-align: right; }\n.dz-hotel-bell-booking .sm2 { font-size: 21px; }\n.dz-hotel-bell-booking .tot { border-bottom: 0; border-top: 1px solid var(--foreground); margin-top: 6px; padding-top: 16px; }\n.dz-hotel-bell-booking .tot .fig { font-size: 46px; }\n.dz-hotel-bell-booking .pri { width: 100%; margin-top: 16px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 3px; padding: 14px; font: inherit; font-size: 15px; cursor: pointer; }\n.dz-hotel-bell-booking .cn { text-align: center; color: var(--muted-foreground); font-size: 11px; margin: 12px 0 0; text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; }\n.dz-hotel-bell-booking .tm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 28px 32px; border-top: 1px solid var(--border); }\n.dz-hotel-bell-booking .tm p { margin: 6px 0 0; color: var(--muted-foreground); font-size: 11.5px; }\n@media (prefers-reduced-motion: reduce) { .dz-hotel-bell-booking *, .dz-hotel-bell-booking *::before, .dz-hotel-bell-booking *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/hotel-bell.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Lustria:wght@400;500;600;700&family=Radio+Canada:wght@400;500;600;700&family=Courier+Prime:wght@400;500;600;700&display=swap"
}