{
  "id": "hotel-bell-front",
  "name": "Front",
  "theme": "hotel-bell",
  "category": "Landing",
  "description": "A hotel front page that carries the basis bar exactly as the booking pages do, so the price in the hero is already for your dates and your party.",
  "layout": "The pinned bar above a 3:2 hero, then a room row and three ruled sections; every figure on the page carries its basis line.",
  "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": "hero",
      "name": "Hero",
      "html": "\n<section class=\"hr\"><figure><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure><div class=\"tx\"><span class=\"k\">Kilcarn · fourteen rooms</span><h1>Two nights, two guests — every price says so</h1><p>The bar above is not a filter you can dismiss. It is the frame of reference for every figure on this site, including the ones on this page, which is why we can show you a real number before you have clicked anything.</p><span class=\"pz\"><span class=\"fig\">£398</span><span class=\"bs\">CHEAPEST ROOM · 2 NIGHTS · 2 GUESTS · INC. BREAKFAST</span></span></div></section>"
    },
    {
      "key": "rooms",
      "name": "Room row",
      "html": "\n<section class=\"rr\"><article><figure><img src=\"{{ART room}}\" alt=\"{{ARTALT room}}\"></figure><h2>Garden Double</h2><span class=\"pz\"><span class=\"fig sm2\">£398</span><span class=\"bs\">2 NIGHTS · 2 GUESTS</span></span></article><article><figure><img src=\"{{ART bed}}\" alt=\"{{ARTALT bed}}\"></figure><h2>Corner Room</h2><span class=\"pz\"><span class=\"fig sm2\">£462</span><span class=\"bs\">2 NIGHTS · 2 GUESTS</span></span></article><article><figure><img src=\"{{ART corridor}}\" alt=\"{{ARTALT corridor}}\"></figure><h2>Long Room</h2><span class=\"pz\"><span class=\"fig sm2\">£540</span><span class=\"bs\">2 NIGHTS · 2 GUESTS</span></span></article></section>"
    },
    {
      "key": "promises",
      "name": "Three promises",
      "html": "\n<section class=\"pm\"><article><h3>No \"from\" prices</h3><p>A price without its basis is a marketing device. If we cannot state the nights and the guests, we do not show a number.</p></article><article><h3>The bar is on every page</h3><p>Including this one, including the rooms page, including the page about the breakfast. It never collapses to an icon on any screen size.</p></article><article><h3>The levy is in the figure</h3><p>City levy, breakfast and VAT are inside every number you see. Nothing is added at the last step.</p></article></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "hotel-bell-front",
    "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-front.json",
  "structure": "The pinned bar above a 3:2 hero, then a room row and three ruled sections; every figure on the page carries its basis line.",
  "html": "<div class=\"dz dz-hotel-bell-front\" data-design=\"hotel-bell-front\" 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=\"hero\" aria-label=\"Hero\">\n<section class=\"hr\"><figure><img src=\"https://designlookbook.dev/assets/img/hotel-bell-hero.webp\" alt=\"A hotel room in afternoon light with a made bed and a tall window\"></figure><div class=\"tx\"><span class=\"k\">Kilcarn · fourteen rooms</span><h1>Two nights, two guests — every price says so</h1><p>The bar above is not a filter you can dismiss. It is the frame of reference for every figure on this site, including the ones on this page, which is why we can show you a real number before you have clicked anything.</p><span class=\"pz\"><span class=\"fig\">£398</span><span class=\"bs\">CHEAPEST ROOM · 2 NIGHTS · 2 GUESTS · INC. BREAKFAST</span></span></div></section></section>\n<section class=\"dz-mod\" data-mod=\"rooms\" aria-label=\"Room row\">\n<section class=\"rr\"><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><h2>Garden Double</h2><span class=\"pz\"><span class=\"fig sm2\">£398</span><span class=\"bs\">2 NIGHTS · 2 GUESTS</span></span></article><article><figure><img src=\"https://designlookbook.dev/assets/img/hotel-bell-bed.webp\" alt=\"Close view of folded white linen on a bed\"></figure><h2>Corner Room</h2><span class=\"pz\"><span class=\"fig sm2\">£462</span><span class=\"bs\">2 NIGHTS · 2 GUESTS</span></span></article><article><figure><img src=\"https://designlookbook.dev/assets/img/hotel-bell-corridor.webp\" alt=\"A hotel corridor receding with doors on one side\"></figure><h2>Long Room</h2><span class=\"pz\"><span class=\"fig sm2\">£540</span><span class=\"bs\">2 NIGHTS · 2 GUESTS</span></span></article></section></section>\n<section class=\"dz-mod\" data-mod=\"promises\" aria-label=\"Three promises\">\n<section class=\"pm\"><article><h3>No \"from\" prices</h3><p>A price without its basis is a marketing device. If we cannot state the nights and the guests, we do not show a number.</p></article><article><h3>The bar is on every page</h3><p>Including this one, including the rooms page, including the page about the breakfast. It never collapses to an icon on any screen size.</p></article><article><h3>The levy is in the figure</h3><p>City levy, breakfast and VAT are inside every number you see. Nothing is added at the last step.</p></article></section></section>\n</div>",
  "css": "\n.dz-hotel-bell-front { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-hotel-bell-front .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-hotel-bell-front .mn { font-family: var(--pv-mono); font-size: 13px; }\n\n.dz-hotel-bell-front .bb { display: flex; align-items: center; gap: 0; height: 64px; border-bottom: 1px solid var(--border); background: var(--card); }\n.dz-hotel-bell-front .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-front .bb .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-hotel-bell-front .bb b { font-family: var(--pv-mono); font-size: 13px; font-weight: 400; margin-top: 3px; }\n.dz-hotel-bell-front .bb .go { margin-left: auto; margin-right: 22px; }\n.dz-hotel-bell-front .hr { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 36px 32px; }\n.dz-hotel-bell-front .hr figure { margin: 0; }\n.dz-hotel-bell-front .hr img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 12px; filter: var(--img-filter); }\n.dz-hotel-bell-front h1 { font-family: var(--pv-display); font-weight: 400; font-size: 58px; line-height: 1.08; letter-spacing: -.02em; margin: 10px 0 14px; }\n.dz-hotel-bell-front .hr p { font-size: 16.5px; line-height: 1.64; margin: 0 0 24px; color: var(--muted-foreground); max-width: 52ch; }\n\n.dz-hotel-bell-front .pz { display: inline-block; }\n.dz-hotel-bell-front .pz .fig { font-family: var(--pv-display); font-weight: 400; color: var(--accent); line-height: 1; display: block; }\n.dz-hotel-bell-front .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-front .pz .fig { font-size: 58px; }\n.dz-hotel-bell-front .sm2 { font-size: 30px; }\n.dz-hotel-bell-front .rr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 32px 36px; }\n.dz-hotel-bell-front .rr figure { margin: 0 0 14px; }\n.dz-hotel-bell-front .rr img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 8px; filter: var(--img-filter); }\n.dz-hotel-bell-front h2 { font-family: var(--pv-display); font-weight: 400; font-size: 33px; margin: 0 0 10px; }\n.dz-hotel-bell-front .pm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 0 32px 40px; }\n.dz-hotel-bell-front .pm article { border-top: 1px solid var(--border); padding-top: 16px; }\n.dz-hotel-bell-front h3 { font-family: var(--pv-display); font-weight: 400; font-size: 20px; margin: 0 0 8px; }\n.dz-hotel-bell-front .pm p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--muted-foreground); }\n.dz-hotel-bell-front .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-front *, .dz-hotel-bell-front *::before, .dz-hotel-bell-front *::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"
}