{
  "id": "hotel-bell-preferences",
  "name": "Preferences",
  "theme": "hotel-bell",
  "category": "Settings & Forms",
  "description": "Stay preferences kept as ruled rows, where anything with a cost shows its price and basis inline rather than revealing a charge at checkout.",
  "layout": "The basis bar, then ruled preference rows with toggles; each chargeable option carries a small price-and-basis pair on the right.",
  "modules": [
    {
      "key": "bar",
      "name": "Basis bar",
      "html": "\n<header class=\"bb\"><div class=\"fld\"><span class=\"k\">Applies to · 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": "head",
      "name": "Preferences header",
      "html": "\n<section class=\"ph\"><h1>Before you arrive</h1><p>Anything with a cost shows it here, priced for your two nights and two guests. Nothing on this page becomes a surprise on the folio.</p></section>"
    },
    {
      "key": "rows",
      "name": "Preference rows",
      "html": "\n<section class=\"pf\">\n<div class=\"rw\"><div><span class=\"lb\">Early check-in from 12:00</span><p class=\"hint\">Subject to the room being ready; charged only if it is.</p></div><span class=\"pz\"><span class=\"fig sm2\">£30</span><span class=\"bs\">ONE-OFF</span></span><span class=\"tog\"><i></i></span></div>\n<div class=\"rw\"><div><span class=\"lb\">Late check-out until 14:00</span><p class=\"hint\">Always available on a Sunday.</p></div><span class=\"pz\"><span class=\"fig sm2\">£25</span><span class=\"bs\">ONE-OFF</span></span><span class=\"tog on\"><i></i></span></div>\n<div class=\"rw\"><div><span class=\"lb\">Parking, on site</span><p class=\"hint\">Six spaces, first come.</p></div><span class=\"pz\"><span class=\"fig sm2\">£24</span><span class=\"bs\">£12 PER NIGHT · 2 NIGHTS</span></span><span class=\"tog on\"><i></i></span></div>\n<div class=\"rw\"><div><span class=\"lb\">Quiet room, away from the stair</span><p class=\"hint\">Free, and we will do our best.</p></div><span class=\"pz\"><span class=\"fig sm2\">Free</span><span class=\"bs\">NO CHARGE</span></span><span class=\"tog on\"><i></i></span></div>\n<div class=\"rw\"><div><span class=\"lb\">Newspaper</span><p class=\"hint\">Delivered to the door before 07:30.</p></div><span class=\"pz\"><span class=\"fig sm2\">£7</span><span class=\"bs\">£3.50 PER MORNING · 2 MORNINGS</span></span><span class=\"tog\"><i></i></span></div>\n</section>"
    },
    {
      "key": "total",
      "name": "Extras total",
      "html": "\n<footer class=\"tt\"><span class=\"k\">Selected extras</span><span class=\"pz\"><span class=\"fig\">£49</span><span class=\"bs\">ADDED TO YOUR FOLIO · 2 NIGHTS · 2 GUESTS</span></span><button class=\"pri\">Save preferences</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "hotel-bell-preferences",
    "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-preferences.json",
  "structure": "The basis bar, then ruled preference rows with toggles; each chargeable option carries a small price-and-basis pair on the right.",
  "html": "<div class=\"dz dz-hotel-bell-preferences\" data-design=\"hotel-bell-preferences\" 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\">Applies to · 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=\"head\" aria-label=\"Preferences header\">\n<section class=\"ph\"><h1>Before you arrive</h1><p>Anything with a cost shows it here, priced for your two nights and two guests. Nothing on this page becomes a surprise on the folio.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"rows\" aria-label=\"Preference rows\">\n<section class=\"pf\">\n<div class=\"rw\"><div><span class=\"lb\">Early check-in from 12:00</span><p class=\"hint\">Subject to the room being ready; charged only if it is.</p></div><span class=\"pz\"><span class=\"fig sm2\">£30</span><span class=\"bs\">ONE-OFF</span></span><span class=\"tog\"><i></i></span></div>\n<div class=\"rw\"><div><span class=\"lb\">Late check-out until 14:00</span><p class=\"hint\">Always available on a Sunday.</p></div><span class=\"pz\"><span class=\"fig sm2\">£25</span><span class=\"bs\">ONE-OFF</span></span><span class=\"tog on\"><i></i></span></div>\n<div class=\"rw\"><div><span class=\"lb\">Parking, on site</span><p class=\"hint\">Six spaces, first come.</p></div><span class=\"pz\"><span class=\"fig sm2\">£24</span><span class=\"bs\">£12 PER NIGHT · 2 NIGHTS</span></span><span class=\"tog on\"><i></i></span></div>\n<div class=\"rw\"><div><span class=\"lb\">Quiet room, away from the stair</span><p class=\"hint\">Free, and we will do our best.</p></div><span class=\"pz\"><span class=\"fig sm2\">Free</span><span class=\"bs\">NO CHARGE</span></span><span class=\"tog on\"><i></i></span></div>\n<div class=\"rw\"><div><span class=\"lb\">Newspaper</span><p class=\"hint\">Delivered to the door before 07:30.</p></div><span class=\"pz\"><span class=\"fig sm2\">£7</span><span class=\"bs\">£3.50 PER MORNING · 2 MORNINGS</span></span><span class=\"tog\"><i></i></span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"total\" aria-label=\"Extras total\">\n<footer class=\"tt\"><span class=\"k\">Selected extras</span><span class=\"pz\"><span class=\"fig\">£49</span><span class=\"bs\">ADDED TO YOUR FOLIO · 2 NIGHTS · 2 GUESTS</span></span><button class=\"pri\">Save preferences</button></footer></section>\n</div>",
  "css": "\n.dz-hotel-bell-preferences { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-hotel-bell-preferences .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-hotel-bell-preferences .mn { font-family: var(--pv-mono); font-size: 13px; }\n\n.dz-hotel-bell-preferences .bb { display: flex; align-items: center; gap: 0; height: 64px; border-bottom: 1px solid var(--border); background: var(--card); }\n.dz-hotel-bell-preferences .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-preferences .bb .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-hotel-bell-preferences .bb b { font-family: var(--pv-mono); font-size: 13px; font-weight: 400; margin-top: 3px; }\n.dz-hotel-bell-preferences .bb .go { margin-left: auto; margin-right: 22px; }\n.dz-hotel-bell-preferences .ph { padding: 32px 32px 16px; max-width: 60ch; }\n.dz-hotel-bell-preferences 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-preferences .ph p { margin: 0; font-size: 16.5px; line-height: 1.64; color: var(--muted-foreground); }\n.dz-hotel-bell-preferences .pf { padding: 0 32px; max-width: 820px; }\n.dz-hotel-bell-preferences .rw { display: grid; grid-template-columns: 1fr 220px 60px; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--border); }\n.dz-hotel-bell-preferences .lb { font-size: 16.5px; }\n.dz-hotel-bell-preferences .hint { margin: 4px 0 0; font-size: 14px; color: var(--muted-foreground); }\n\n.dz-hotel-bell-preferences .pz { display: inline-block; }\n.dz-hotel-bell-preferences .pz .fig { font-family: var(--pv-display); font-weight: 400; color: var(--accent); line-height: 1; display: block; }\n.dz-hotel-bell-preferences .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-preferences .sm2 { font-size: 26px; }\n.dz-hotel-bell-preferences .tog { display: inline-flex; width: 48px; height: 26px; border-radius: 9999px; background: var(--secondary); border: 1px solid var(--border); padding: 3px; justify-self: end; }\n.dz-hotel-bell-preferences .tog i { width: 18px; height: 18px; border-radius: 9999px; background: var(--muted-foreground); }\n.dz-hotel-bell-preferences .tog.on { background: color-mix(in oklab, var(--primary) 30%, transparent); border-color: var(--primary); }\n.dz-hotel-bell-preferences .tog.on i { background: var(--primary); margin-left: auto; }\n.dz-hotel-bell-preferences .tt { display: flex; align-items: center; gap: 28px; padding: 24px 32px 36px; max-width: 820px; }\n.dz-hotel-bell-preferences .tt .pz .fig { font-size: 46px; }\n.dz-hotel-bell-preferences .pri { margin-left: auto; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 3px; padding: 13px 24px; font: inherit; font-size: 15px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-hotel-bell-preferences *, .dz-hotel-bell-preferences *::before, .dz-hotel-bell-preferences *::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"
}