{
  "id": "hotel-bell-rooms",
  "name": "Rooms",
  "theme": "hotel-bell",
  "category": "Search & Browse",
  "description": "Room results where every figure is followed by the nights and guests it assumes, and the basis bar above defines those values for the whole page.",
  "layout": "A pinned 64px basis bar over a list of 3:2 room cards; each card ends with a price block whose basis line is inseparable from the figure.",
  "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": "Results header",
      "html": "\n<section class=\"rh\"><h1>Six rooms free</h1><p class=\"mn\">Every price on this page is for 2 nights and 2 guests, including breakfast and the city levy.</p></section>"
    },
    {
      "key": "list",
      "name": "Room cards",
      "html": "\n<section class=\"ls\">\n<article><figure><img src=\"{{ART room}}\" alt=\"{{ARTALT room}}\"></figure><div class=\"dt\"><span class=\"k\">Courtyard</span><h2>Garden Double</h2><div class=\"am\"><span>22 m²</span><span>Courtyard view</span><span>Walk-in shower</span></div><p class=\"ds\">Ground floor, opening on the courtyard. Quiet, and dark in the mornings because of it.</p></div><div class=\"pc\"><span class=\"pz\"><span class=\"fig\">£398</span><span class=\"bs\">2 NIGHTS · 2 GUESTS · INC. BREAKFAST</span></span><button class=\"pri\">Reserve</button></div></article>\n<article><figure><img src=\"{{ART bed}}\" alt=\"{{ARTALT bed}}\"></figure><div class=\"dt\"><span class=\"k\">Second floor</span><h2>Corner Room</h2><div class=\"am\"><span>28 m²</span><span>Two aspects</span><span>Bath and shower</span></div><p class=\"ds\">Two tall windows on the corner. The brightest room in the building and the noisiest, which is the same fact.</p></div><div class=\"pc\"><span class=\"pz\"><span class=\"fig\">£462</span><span class=\"bs\">2 NIGHTS · 2 GUESTS · INC. BREAKFAST</span></span><button class=\"pri\">Reserve</button></div></article>\n<article><figure><img src=\"{{ART corridor}}\" alt=\"{{ARTALT corridor}}\"></figure><div class=\"dt\"><span class=\"k\">Attic</span><h2>Long Room</h2><div class=\"am\"><span>34 m²</span><span>Roof view</span><span>Freestanding bath</span></div><p class=\"ds\">Under the eaves, so the ceiling slopes and one end of it is not for tall people.</p></div><div class=\"pc\"><span class=\"pz\"><span class=\"fig\">£540</span><span class=\"bs\">2 NIGHTS · 2 GUESTS · INC. BREAKFAST</span></span><button class=\"pri\">Reserve</button></div></article>\n</section>"
    },
    {
      "key": "note",
      "name": "Basis note",
      "html": "\n<footer class=\"nt\"><span class=\"k\">On these prices</span><p>There is no \"from\" price anywhere on this site. If the bar says two nights and two guests, every figure you see is for two nights and two guests, and it is the figure you will pay.</p></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "hotel-bell-rooms",
    "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-rooms.json",
  "structure": "A pinned 64px basis bar over a list of 3:2 room cards; each card ends with a price block whose basis line is inseparable from the figure.",
  "html": "<div class=\"dz dz-hotel-bell-rooms\" data-design=\"hotel-bell-rooms\" 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=\"Results header\">\n<section class=\"rh\"><h1>Six rooms free</h1><p class=\"mn\">Every price on this page is for 2 nights and 2 guests, including breakfast and the city levy.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"list\" aria-label=\"Room cards\">\n<section class=\"ls\">\n<article><figure><img src=\"https://designlookbook.dev/assets/img/hotel-bell-room.webp\" alt=\"A corner of a hotel room with a chair and soft shadow\"></figure><div class=\"dt\"><span class=\"k\">Courtyard</span><h2>Garden Double</h2><div class=\"am\"><span>22 m²</span><span>Courtyard view</span><span>Walk-in shower</span></div><p class=\"ds\">Ground floor, opening on the courtyard. Quiet, and dark in the mornings because of it.</p></div><div class=\"pc\"><span class=\"pz\"><span class=\"fig\">£398</span><span class=\"bs\">2 NIGHTS · 2 GUESTS · INC. BREAKFAST</span></span><button class=\"pri\">Reserve</button></div></article>\n<article><figure><img src=\"https://designlookbook.dev/assets/img/hotel-bell-bed.webp\" alt=\"Close view of folded white linen on a bed\"></figure><div class=\"dt\"><span class=\"k\">Second floor</span><h2>Corner Room</h2><div class=\"am\"><span>28 m²</span><span>Two aspects</span><span>Bath and shower</span></div><p class=\"ds\">Two tall windows on the corner. The brightest room in the building and the noisiest, which is the same fact.</p></div><div class=\"pc\"><span class=\"pz\"><span class=\"fig\">£462</span><span class=\"bs\">2 NIGHTS · 2 GUESTS · INC. BREAKFAST</span></span><button class=\"pri\">Reserve</button></div></article>\n<article><figure><img src=\"https://designlookbook.dev/assets/img/hotel-bell-corridor.webp\" alt=\"A hotel corridor receding with doors on one side\"></figure><div class=\"dt\"><span class=\"k\">Attic</span><h2>Long Room</h2><div class=\"am\"><span>34 m²</span><span>Roof view</span><span>Freestanding bath</span></div><p class=\"ds\">Under the eaves, so the ceiling slopes and one end of it is not for tall people.</p></div><div class=\"pc\"><span class=\"pz\"><span class=\"fig\">£540</span><span class=\"bs\">2 NIGHTS · 2 GUESTS · INC. BREAKFAST</span></span><button class=\"pri\">Reserve</button></div></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"Basis note\">\n<footer class=\"nt\"><span class=\"k\">On these prices</span><p>There is no \"from\" price anywhere on this site. If the bar says two nights and two guests, every figure you see is for two nights and two guests, and it is the figure you will pay.</p></footer></section>\n</div>",
  "css": "\n.dz-hotel-bell-rooms { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-hotel-bell-rooms .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-hotel-bell-rooms .mn { font-family: var(--pv-mono); font-size: 13px; }\n\n.dz-hotel-bell-rooms .bb { display: flex; align-items: center; gap: 0; height: 64px; border-bottom: 1px solid var(--border); background: var(--card); }\n.dz-hotel-bell-rooms .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-rooms .bb .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-hotel-bell-rooms .bb b { font-family: var(--pv-mono); font-size: 13px; font-weight: 400; margin-top: 3px; }\n.dz-hotel-bell-rooms .bb .go { margin-left: auto; margin-right: 22px; }\n.dz-hotel-bell-rooms .rh { padding: 28px 32px 18px; }\n.dz-hotel-bell-rooms h1 { font-family: var(--pv-display); font-weight: 400; font-size: 58px; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 8px; }\n.dz-hotel-bell-rooms .rh .mn { color: var(--muted-foreground); margin: 0; }\n.dz-hotel-bell-rooms .ls { padding: 0 32px 28px; }\n.dz-hotel-bell-rooms .ls article { display: grid; grid-template-columns: 300px 1fr 220px; gap: 28px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--border); }\n.dz-hotel-bell-rooms figure { margin: 0; }\n.dz-hotel-bell-rooms figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 12px; filter: var(--img-filter); }\n.dz-hotel-bell-rooms h2 { font-family: var(--pv-display); font-weight: 400; font-size: 33px; line-height: 1.18; margin: 6px 0 10px; }\n.dz-hotel-bell-rooms .am { display: flex; gap: 8px; margin-bottom: 10px; }\n.dz-hotel-bell-rooms .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: 5px 10px; }\n.dz-hotel-bell-rooms .ds { font-size: 15px; line-height: 1.62; margin: 0; color: var(--muted-foreground); max-width: 58ch; }\n.dz-hotel-bell-rooms .pc { text-align: right; }\n\n.dz-hotel-bell-rooms .pz { display: inline-block; }\n.dz-hotel-bell-rooms .pz .fig { font-family: var(--pv-display); font-weight: 400; color: var(--accent); line-height: 1; display: block; }\n.dz-hotel-bell-rooms .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-rooms .pz .fig { font-size: 46px; }\n.dz-hotel-bell-rooms .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 3px; padding: 13px 24px; font: inherit; font-size: 15px; cursor: pointer; margin-top: 16px; }\n.dz-hotel-bell-rooms .nt { padding: 0 32px 32px; }\n.dz-hotel-bell-rooms .nt p { margin: 8px 0 0; font-size: 15px; line-height: 1.62; color: var(--muted-foreground); max-width: 64ch; }\n@media (prefers-reduced-motion: reduce) { .dz-hotel-bell-rooms *, .dz-hotel-bell-rooms *::before, .dz-hotel-bell-rooms *::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"
}