{
  "id": "hotel-bell-rates",
  "name": "Rates",
  "theme": "hotel-bell",
  "category": "Pricing",
  "description": "Rate plans compared for the party in the basis bar, so the three figures on the page are directly comparable rather than three different assumptions.",
  "layout": "The basis bar over three rate columns; each carries the same price-and-basis component and the difference between them is stated in mono.",
  "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><button class=\"pri go\">Update</button></header>"
    },
    {
      "key": "head",
      "name": "Rates header",
      "html": "\n<section class=\"rh\"><h1>Three ways to book the Corner Room</h1><p class=\"mn\">ALL THREE FIGURES ARE FOR 2 NIGHTS AND 2 GUESTS, SO THEY CAN BE COMPARED DIRECTLY.</p></section>"
    },
    {
      "key": "plans",
      "name": "Rate columns",
      "html": "\n<section class=\"pl\">\n<article><span class=\"k\">Flexible</span><span class=\"pz\"><span class=\"fig\">£462</span><span class=\"bs\">2 NIGHTS · 2 GUESTS · ALL IN</span></span><ul><li>Free cancellation until 13 May</li><li>Pay on arrival</li><li>Breakfast included</li><li>Change dates once, free</li></ul><button class=\"pri\">Book flexible</button></article>\n<article class=\"on\"><span class=\"k\">Semi-flexible</span><span class=\"pz\"><span class=\"fig\">£416</span><span class=\"bs\">2 NIGHTS · 2 GUESTS · ALL IN</span></span><ul><li>Free cancellation until 8 May</li><li>Half now, half on arrival</li><li>Breakfast included</li><li>Change dates once, £25</li></ul><button class=\"pri\">Book semi-flexible</button></article>\n<article><span class=\"k\">Advance</span><span class=\"pz\"><span class=\"fig\">£370</span><span class=\"bs\">2 NIGHTS · 2 GUESTS · ALL IN</span></span><ul><li>Non-refundable</li><li>Paid in full now</li><li>Breakfast included</li><li>Dates cannot be changed</li></ul><button class=\"gh\">Book advance</button></article>\n</section>"
    },
    {
      "key": "delta",
      "name": "Difference note",
      "html": "\n<footer class=\"dl\"><span class=\"k\">The difference</span><div class=\"rw\"><span>Flexible over Advance</span><b class=\"mn\">£92 · 24.9%</b></div><div class=\"rw\"><span>Semi-flexible over Advance</span><b class=\"mn\">£46 · 12.4%</b></div><p>That is what the cancellation right costs on these dates. On other dates it is a different number and we will show it the same way.</p></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "hotel-bell-rates",
    "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-rates.json",
  "structure": "The basis bar over three rate columns; each carries the same price-and-basis component and the difference between them is stated in mono.",
  "html": "<div class=\"dz dz-hotel-bell-rates\" data-design=\"hotel-bell-rates\" 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><button class=\"pri go\">Update</button></header></section>\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Rates header\">\n<section class=\"rh\"><h1>Three ways to book the Corner Room</h1><p class=\"mn\">ALL THREE FIGURES ARE FOR 2 NIGHTS AND 2 GUESTS, SO THEY CAN BE COMPARED DIRECTLY.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"plans\" aria-label=\"Rate columns\">\n<section class=\"pl\">\n<article><span class=\"k\">Flexible</span><span class=\"pz\"><span class=\"fig\">£462</span><span class=\"bs\">2 NIGHTS · 2 GUESTS · ALL IN</span></span><ul><li>Free cancellation until 13 May</li><li>Pay on arrival</li><li>Breakfast included</li><li>Change dates once, free</li></ul><button class=\"pri\">Book flexible</button></article>\n<article class=\"on\"><span class=\"k\">Semi-flexible</span><span class=\"pz\"><span class=\"fig\">£416</span><span class=\"bs\">2 NIGHTS · 2 GUESTS · ALL IN</span></span><ul><li>Free cancellation until 8 May</li><li>Half now, half on arrival</li><li>Breakfast included</li><li>Change dates once, £25</li></ul><button class=\"pri\">Book semi-flexible</button></article>\n<article><span class=\"k\">Advance</span><span class=\"pz\"><span class=\"fig\">£370</span><span class=\"bs\">2 NIGHTS · 2 GUESTS · ALL IN</span></span><ul><li>Non-refundable</li><li>Paid in full now</li><li>Breakfast included</li><li>Dates cannot be changed</li></ul><button class=\"gh\">Book advance</button></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"delta\" aria-label=\"Difference note\">\n<footer class=\"dl\"><span class=\"k\">The difference</span><div class=\"rw\"><span>Flexible over Advance</span><b class=\"mn\">£92 · 24.9%</b></div><div class=\"rw\"><span>Semi-flexible over Advance</span><b class=\"mn\">£46 · 12.4%</b></div><p>That is what the cancellation right costs on these dates. On other dates it is a different number and we will show it the same way.</p></footer></section>\n</div>",
  "css": "\n.dz-hotel-bell-rates { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-hotel-bell-rates .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-hotel-bell-rates .mn { font-family: var(--pv-mono); font-size: 13px; }\n\n.dz-hotel-bell-rates .bb { display: flex; align-items: center; gap: 0; height: 64px; border-bottom: 1px solid var(--border); background: var(--card); }\n.dz-hotel-bell-rates .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-rates .bb .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-hotel-bell-rates .bb b { font-family: var(--pv-mono); font-size: 13px; font-weight: 400; margin-top: 3px; }\n.dz-hotel-bell-rates .bb .go { margin-left: auto; margin-right: 22px; }\n.dz-hotel-bell-rates .rh { padding: 32px 32px 20px; }\n.dz-hotel-bell-rates h1 { font-family: var(--pv-display); font-weight: 400; font-size: 58px; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 10px; }\n.dz-hotel-bell-rates .rh .mn { color: var(--muted-foreground); margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; }\n.dz-hotel-bell-rates .pl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 32px 32px; }\n.dz-hotel-bell-rates .pl article { border: 1px solid var(--border); border-radius: 8px; padding: 24px; background: var(--card); }\n.dz-hotel-bell-rates .pl .on { border-color: var(--primary); border-width: 2px; padding: 23px; }\n\n.dz-hotel-bell-rates .pz { display: inline-block; }\n.dz-hotel-bell-rates .pz .fig { font-family: var(--pv-display); font-weight: 400; color: var(--accent); line-height: 1; display: block; }\n.dz-hotel-bell-rates .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-rates .pz { margin: 14px 0 20px; }\n.dz-hotel-bell-rates .pz .fig { font-size: 58px; }\n.dz-hotel-bell-rates ul { list-style: none; margin: 0 0 20px; padding: 0; }\n.dz-hotel-bell-rates li { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 15px; }\n.dz-hotel-bell-rates button { width: 100%; border-radius: 3px; padding: 13px; font: inherit; font-size: 15px; cursor: pointer; }\n.dz-hotel-bell-rates .pri { background: var(--primary); color: var(--primary-foreground); border: 0; }\n.dz-hotel-bell-rates .gh { background: transparent; color: var(--foreground); border: 1px solid var(--border); }\n.dz-hotel-bell-rates .dl { padding: 0 32px 36px; }\n.dz-hotel-bell-rates .rw { display: flex; align-items: baseline; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 15px; max-width: 60ch; }\n.dz-hotel-bell-rates .rw b { margin-left: auto; color: var(--accent); font-weight: 400; }\n.dz-hotel-bell-rates .dl p { margin: 14px 0 0; font-size: 15px; line-height: 1.62; color: var(--muted-foreground); max-width: 60ch; }\n.dz-hotel-bell-rates .go { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 3px; padding: 11px 20px; font: inherit; font-size: 14px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-hotel-bell-rates *, .dz-hotel-bell-rates *::before, .dz-hotel-bell-rates *::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"
}