Concept · 09Top 3 + reserve weight

Progressive disclosure with sticky CTA

Balances density and full visibility. The weighted Reserve CTA reinforces that every visible rate is one click from booking — disclosure without losing momentum.

Hotel PDPRooms & Ratesimplied context · 764 px
Progressive disclosure · click a rate to select

King Room

1 King Bed · Sleeps 2
Top 3 of 7 shown

Queen Room

1 Queen Bed · Sleeps 2
Top 3 of 5 shown
Click any rate to select · sticky reserve appears here
State breakdown · 3 states
State 01 / 03Top 3
Progressive disclosure · click a rate to select

King Room

1 King Bed · Sleeps 2
Top 3 of 7 shown

Queen Room

1 Queen Bed · Sleeps 2
Top 3 of 5 shown
Click any rate to select · sticky reserve appears here
State 02 / 03Show more expanded
Progressive disclosure · click a rate to select

King Room

1 King Bed · Sleeps 2
Top 3 of 7 shown

Queen Room

1 Queen Bed · Sleeps 2
Top 3 of 5 shown
Click any rate to select · sticky reserve appears here
State 03 / 03Rate selected · sticky CTA
Progressive disclosure · click a rate to select

King Room

1 King Bed · Sleeps 2
Top 3 of 7 shown

Queen Room

1 Queen Bed · Sleeps 2
Top 3 of 5 shown
Click any rate to select · sticky reserve appears here
Design review · breakdown
What this is
Each room type initially shows only 2–3 top rates. A 'Show N more' control reveals the rest inline. Reserve buttons are visually heavier and right-anchored on every row.
Why it works
Balances density and full visibility. The weighted CTA reinforces that every visible rate is one click from booking — supports both fast bookers and thorough comparers.
Best use case
Mixed-inventory PDPs where most users only need the top few rates but power users still want the long tail. Strong default candidate.
Tradeoffs / risks
'Top 3' depends on the sort heuristic. If sort is unclear, hidden rates feel arbitrary. The 'Show more' control adds a click cost for thorough users.
UX notes · scannability · normalization · booking confidence · provider transparency
High booking confidence due to assertive CTA and persistent selected-rate bar. Normalization shown via the room-type group; the 'Top 3 of 7 shown' label keeps the user oriented and trusting the truncation.
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: 9 of 14
- Section: normalizer
- Name: Progressive disclosure with sticky CTA
- Tagline: Top 3 + reserve weight
- One-line summary: Top 2–3 rates shown initially; 'Show N more' reveals the rest inline. Reserve buttons heavier and right-anchored.

# Framing
Balances density and full visibility. The weighted Reserve CTA reinforces that every visible rate is one click from booking — disclosure without losing momentum.

# What this is
Each room type initially shows only 2–3 top rates. A 'Show N more' control reveals the rest inline. Reserve buttons are visually heavier and right-anchored on every row.

# Why it works
Balances density and full visibility. The weighted CTA reinforces that every visible rate is one click from booking — supports both fast bookers and thorough comparers.

# Best use case
Mixed-inventory PDPs where most users only need the top few rates but power users still want the long tail. Strong default candidate.

# Tradeoffs / risks
'Top 3' depends on the sort heuristic. If sort is unclear, hidden rates feel arbitrary. The 'Show more' control adds a click cost for thorough users.

# UX notes (scannability · normalization · booking confidence · provider transparency)
High booking confidence due to assertive CTA and persistent selected-rate bar. Normalization shown via the room-type group; the 'Top 3 of 7 shown' label keeps the user oriented and trusting the truncation.

# 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.