{
  "id": "hotel-bell-stays",
  "name": "Your Stays",
  "theme": "hotel-bell",
  "category": "Profile & Social",
  "description": "A guest’s history where every past stay keeps the basis it was booked on, so an old figure still means something years later.",
  "layout": "The basis bar set to the next stay, then a ruled history where each row carries its own nights-and-guests basis beside the figure paid.",
  "modules": [
    {
      "key": "bar",
      "name": "Next stay bar",
      "html": "\n<header class=\"bb\"><div class=\"fld\"><span class=\"k\">Next stay · 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\">Manage</button></header>"
    },
    {
      "key": "who",
      "name": "Guest block",
      "html": "\n<section class=\"wh\"><div><span class=\"k\">Guest since March 2021</span><h1>Marta Reyes</h1><p class=\"mn\">11 STAYS · 26 NIGHTS · USUALLY THE CORNER ROOM · NO ALLERGIES RECORDED</p></div><figure><img src=\"{{ART bed}}\" alt=\"{{ARTALT bed}}\"></figure></section>"
    },
    {
      "key": "history",
      "name": "Stay history",
      "html": "\n<section class=\"hs\"><span class=\"k\">Every stay</span>\n<div class=\"rw next\"><span class=\"dt mn\">15—17 May 2026</span><span class=\"rm\">Corner Room</span><span class=\"pz\"><span class=\"fig sm2\">£462</span><span class=\"bs\">2 NIGHTS · 2 GUESTS</span></span><span class=\"st\">Booked</span></div>\n<div class=\"rw\"><span class=\"dt mn\">04—06 Jan 2026</span><span class=\"rm\">Corner Room</span><span class=\"pz\"><span class=\"fig sm2\">£398</span><span class=\"bs\">2 NIGHTS · 2 GUESTS</span></span><span class=\"st\">Stayed</span></div>\n<div class=\"rw\"><span class=\"dt mn\">12—16 Sep 2025</span><span class=\"rm\">Long Room</span><span class=\"pz\"><span class=\"fig sm2\">£980</span><span class=\"bs\">4 NIGHTS · 2 GUESTS</span></span><span class=\"st\">Stayed</span></div>\n<div class=\"rw\"><span class=\"dt mn\">28—29 Mar 2025</span><span class=\"rm\">Garden Double</span><span class=\"pz\"><span class=\"fig sm2\">£184</span><span class=\"bs\">1 NIGHT · 1 GUEST</span></span><span class=\"st\">Stayed</span></div>\n<div class=\"rw\"><span class=\"dt mn\">02—05 Nov 2024</span><span class=\"rm\">Corner Room</span><span class=\"pz\"><span class=\"fig sm2\">£612</span><span class=\"bs\">3 NIGHTS · 2 GUESTS</span></span><span class=\"st\">Stayed</span></div>\n</section>"
    },
    {
      "key": "note",
      "name": "History note",
      "html": "\n<footer class=\"nt\"><span class=\"k\">Why the old figures still make sense</span><p>Each row keeps the basis it was booked on. £980 and £184 are not comparable and the basis lines say so, which is the whole reason we store them together.</p></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "hotel-bell-stays",
    "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-stays.json",
  "structure": "The basis bar set to the next stay, then a ruled history where each row carries its own nights-and-guests basis beside the figure paid.",
  "html": "<div class=\"dz dz-hotel-bell-stays\" data-design=\"hotel-bell-stays\" data-theme=\"hotel-bell\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Next stay bar\">\n<header class=\"bb\"><div class=\"fld\"><span class=\"k\">Next stay · 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\">Manage</button></header></section>\n<section class=\"dz-mod\" data-mod=\"who\" aria-label=\"Guest block\">\n<section class=\"wh\"><div><span class=\"k\">Guest since March 2021</span><h1>Marta Reyes</h1><p class=\"mn\">11 STAYS · 26 NIGHTS · USUALLY THE CORNER ROOM · NO ALLERGIES RECORDED</p></div><figure><img src=\"https://designlookbook.dev/assets/img/hotel-bell-bed.webp\" alt=\"Close view of folded white linen on a bed\"></figure></section></section>\n<section class=\"dz-mod\" data-mod=\"history\" aria-label=\"Stay history\">\n<section class=\"hs\"><span class=\"k\">Every stay</span>\n<div class=\"rw next\"><span class=\"dt mn\">15—17 May 2026</span><span class=\"rm\">Corner Room</span><span class=\"pz\"><span class=\"fig sm2\">£462</span><span class=\"bs\">2 NIGHTS · 2 GUESTS</span></span><span class=\"st\">Booked</span></div>\n<div class=\"rw\"><span class=\"dt mn\">04—06 Jan 2026</span><span class=\"rm\">Corner Room</span><span class=\"pz\"><span class=\"fig sm2\">£398</span><span class=\"bs\">2 NIGHTS · 2 GUESTS</span></span><span class=\"st\">Stayed</span></div>\n<div class=\"rw\"><span class=\"dt mn\">12—16 Sep 2025</span><span class=\"rm\">Long Room</span><span class=\"pz\"><span class=\"fig sm2\">£980</span><span class=\"bs\">4 NIGHTS · 2 GUESTS</span></span><span class=\"st\">Stayed</span></div>\n<div class=\"rw\"><span class=\"dt mn\">28—29 Mar 2025</span><span class=\"rm\">Garden Double</span><span class=\"pz\"><span class=\"fig sm2\">£184</span><span class=\"bs\">1 NIGHT · 1 GUEST</span></span><span class=\"st\">Stayed</span></div>\n<div class=\"rw\"><span class=\"dt mn\">02—05 Nov 2024</span><span class=\"rm\">Corner Room</span><span class=\"pz\"><span class=\"fig sm2\">£612</span><span class=\"bs\">3 NIGHTS · 2 GUESTS</span></span><span class=\"st\">Stayed</span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"History note\">\n<footer class=\"nt\"><span class=\"k\">Why the old figures still make sense</span><p>Each row keeps the basis it was booked on. £980 and £184 are not comparable and the basis lines say so, which is the whole reason we store them together.</p></footer></section>\n</div>",
  "css": "\n.dz-hotel-bell-stays { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-hotel-bell-stays .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-hotel-bell-stays .mn { font-family: var(--pv-mono); font-size: 13px; }\n\n.dz-hotel-bell-stays .bb { display: flex; align-items: center; gap: 0; height: 64px; border-bottom: 1px solid var(--border); background: var(--card); }\n.dz-hotel-bell-stays .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-stays .bb .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-hotel-bell-stays .bb b { font-family: var(--pv-mono); font-size: 13px; font-weight: 400; margin-top: 3px; }\n.dz-hotel-bell-stays .bb .go { margin-left: auto; margin-right: 22px; }\n.dz-hotel-bell-stays .wh { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: center; padding: 32px; border-bottom: 1px solid var(--border); }\n.dz-hotel-bell-stays h1 { font-family: var(--pv-display); font-weight: 400; font-size: 58px; line-height: 1.08; letter-spacing: -.02em; margin: 8px 0 10px; }\n.dz-hotel-bell-stays .wh .mn { color: var(--muted-foreground); margin: 0; font-size: 11.5px; }\n.dz-hotel-bell-stays .wh figure { margin: 0; }\n.dz-hotel-bell-stays .wh img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 8px; filter: var(--img-filter); }\n.dz-hotel-bell-stays .hs { padding: 24px 32px; }\n.dz-hotel-bell-stays .hs .k { display: block; margin-bottom: 12px; }\n.dz-hotel-bell-stays .rw { display: grid; grid-template-columns: 180px 1fr 220px 90px; gap: 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); }\n.dz-hotel-bell-stays .rw.next { border-left: 3px solid var(--primary); padding-left: 12px; margin-left: -15px; }\n.dz-hotel-bell-stays .dt { color: var(--muted-foreground); }\n.dz-hotel-bell-stays .rm { font-family: var(--pv-display); font-weight: 400; font-size: 20px; }\n\n.dz-hotel-bell-stays .pz { display: inline-block; }\n.dz-hotel-bell-stays .pz .fig { font-family: var(--pv-display); font-weight: 400; color: var(--accent); line-height: 1; display: block; }\n.dz-hotel-bell-stays .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-stays .sm2 { font-size: 26px; }\n.dz-hotel-bell-stays .st { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); text-align: right; }\n.dz-hotel-bell-stays .nt { padding: 0 32px 32px; }\n.dz-hotel-bell-stays .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-stays *, .dz-hotel-bell-stays *::before, .dz-hotel-bell-stays *::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"
}