Hotel PDP›Rooms & Ratesimplied context · 764 px
Accordion · room groups
·
Flexible · Bed & Breakfast· City view
Egencia Business rateFree cancellationIncludes breakfastIncludes wifiPay at hotel+1
$251
per night
Best Available Rate· City view
Egencia Business rateNegotiatedFree cancellationIncludes wifiPay online+1
$239
per night
Advance Purchase 21d· Standard view
Cancellation feeIncludes wifiPay online
$214
per night
Loyalty Saver· City view
Loyalty rateFree cancellationIncludes breakfastIncludes wifi+1
$228
per night
Non-refundable · Breakfast· Standard view
Cancellation feeIncludes breakfastIncludes wifiPay at hotel
$219
per night
Flex + Parking· City view
Free cancellationIncludes wifiIncludes parkingPay online+1
$244
per night
Advance Purchase 30d· Courtyard
Cancellation feeIncludes wifiPay online
$218
per night
State breakdown · 2 states
State 01 / 02All collapsed
Accordion · room groups
·
Flexible · Bed & Breakfast· City view
Egencia Business rateFree cancellationIncludes breakfastIncludes wifiPay at hotel+1
$251
per night
Best Available Rate· City view
Egencia Business rateNegotiatedFree cancellationIncludes wifiPay online+1
$239
per night
Advance Purchase 21d· Standard view
Cancellation feeIncludes wifiPay online
$214
per night
Loyalty Saver· City view
Loyalty rateFree cancellationIncludes breakfastIncludes wifi+1
$228
per night
Non-refundable · Breakfast· Standard view
Cancellation feeIncludes breakfastIncludes wifiPay at hotel
$219
per night
Flex + Parking· City view
Free cancellationIncludes wifiIncludes parkingPay online+1
$244
per night
Advance Purchase 30d· Courtyard
Cancellation feeIncludes wifiPay online
$218
per night
State 02 / 02First group expanded
Accordion · room groups
·
Flexible · Bed & Breakfast· City view
Egencia Business rateFree cancellationIncludes breakfastIncludes wifiPay at hotel+1
$251
per night
Best Available Rate· City view
Egencia Business rateNegotiatedFree cancellationIncludes wifiPay online+1
$239
per night
Advance Purchase 21d· Standard view
Cancellation feeIncludes wifiPay online
$214
per night
Loyalty Saver· City view
Loyalty rateFree cancellationIncludes breakfastIncludes wifi+1
$228
per night
Non-refundable · Breakfast· Standard view
Cancellation feeIncludes breakfastIncludes wifiPay at hotel
$219
per night
Flex + Parking· City view
Free cancellationIncludes wifiIncludes parkingPay online+1
$244
per night
Advance Purchase 30d· Courtyard
Cancellation feeIncludes wifiPay online
$218
per night
Design review · breakdown
What this is
Each room type is a collapsible header showing rate count and price-from. Users expand the groups they care about; others stay collapsed.
Why it works
Tames pages with many room types. The header summary (count + lowest price) lets users triage groups before drilling in. Solves vertical bloat without removing options.
Best use case
Properties with 4+ room types and dense rate inventory where seeing everything at once would overwhelm.
Tradeoffs / risks
Hidden inventory means users may miss a competitive rate. Extra click cost for power users who want full visibility. Default open/closed state matters a lot.
UX notes · scannability · normalization · booking confidence · provider transparency
Group meta (count, from-price) is the normalization payoff signal — the user sees consolidation working. Rate detail only appears once expanded. Booking confidence tied to per-row pills inside the open group.
Hand off · Claude Code prompt
Paste this into Claude Code to regenerate this concept as a standalone interactive wireframe component.
You are building one self-contained, fully interactive wireframe-style React component that demonstrates a single hotel "Room Normalizer" concept. # Concept - Number: 2 of 14 - Section: normalizer - Name: Accordion room groups - Tagline: Collapsible groups - One-line summary: Each room type is a collapsible header with rate count and price-from. Users expand what they care about. # Framing Optimizes for properties with many room types where seeing every rate at once would overwhelm. The collapsed state acts as a triage view; expansion is opt-in per group. # What this is Each room type is a collapsible header showing rate count and price-from. Users expand the groups they care about; others stay collapsed. # Why it works Tames pages with many room types. The header summary (count + lowest price) lets users triage groups before drilling in. Solves vertical bloat without removing options. # Best use case Properties with 4+ room types and dense rate inventory where seeing everything at once would overwhelm. # Tradeoffs / risks Hidden inventory means users may miss a competitive rate. Extra click cost for power users who want full visibility. Default open/closed state matters a lot. # UX notes (scannability · normalization · booking confidence · provider transparency) Group meta (count, from-price) is the normalization payoff signal — the user sees consolidation working. Rate detail only appears once expanded. Booking confidence tied to per-row pills inside the open group. # Visual + interaction requirements - Wireframe fidelity: monochrome, system UI, no brand color. Use Tailwind utility classes only. No images. Use simple borders, muted backgrounds, and mono labels for meta text (uppercase, tracking-widest, text-[10px]). - Canvas width: 764px, centered. Internal content respects that frame. - Context: this lives inside a hotel PDP "Rooms & Rates" section. Assume 3 normalized room types (King, Queen, Double Queen) with 5–8 bookable rates each. Invent realistic mock data inline — rate label, bed, meals (room only / breakfast included), cancellation (free until N / non-refundable), payment (pay now / pay at hotel), price per night. - Fully interactive: every control the concept implies must work in-browser with React state only — no backend, no router. Examples: accordions expand, tabs filter, sort headers sort, "Show N more" reveals rows, builder toggles recompute price live, sticky CTAs update with selection. - Accessibility: real <button> elements, keyboard focus rings, aria-expanded on disclosure controls, aria-pressed on toggles. # Deliverable - A single default-exported React component file using TypeScript + Tailwind. - No external UI library. Inline any small primitives you need. - Include the mock data inline at the top of the file. - File should run as-is when dropped into a Vite + React + Tailwind project. Build only this concept. Do not generate the other 13.