Components
Room Type Card
BetaDisplays a single room or accommodation category with image, bed configuration, amenities, price, and a selectable CTA. Used in room selection flows within the booking funnel.
Deluxe Ocean View Room
- Ocean view
- Private balcony
- Air conditioning
- Free Wi-Fi
7 nights
£1,895
per person
Purpose
The RoomTypeCard presents a single accommodation option within a room-selection step. It is used in:
- Booking funnel step 3 — "Choose your room" after dates and travellers are confirmed
- Hotel detail pages — showing all available room categories side-by-side
- Upgrade prompts — highlighting premium room options during booking review
The card supports a selected state with teal border and ring to indicate the active choice. The onSelect handler connects it to parent booking state.
Usage
Reach for RoomTypeCard specifically when a traveller must choose between accommodation categories within a single hotel — it is a selection control disguised as a card, not a browsable listing item. For a general bookable holiday offer, use Trip Card instead; for a resort-level overview, use Resort Card.
It appears in the "Choose your room" step of the booking funnel, in room-comparison grids on hotel detail pages, and in upgrade-prompt surfaces during booking review — always alongside its sibling cards so the traveller can compare options side-by-side.
Anatomy
Garden Villa
- Private garden
- Outdoor shower
- Mini bar
7 nights
£2,450
per person
- 1Room image — 4:3 aspect ratio image. No image = BedDouble placeholder icon. Badge (e.g. "Best value") overlaid top-left in yellow.
- 2Room name — Semibold heading. e.g. "Overwater Villa with Pool".
- 3Bed configuration — BedDouble icon + e.g. "1 King bed" or "2 Twin beds".
- 4Capacity — Users icon + "Up to N guests".
- 5Amenities list — Green tick list of included features. e.g. Air conditioning, Free Wi-Fi, Sea view.
- 6Price and CTA — Price from + per-person basis + nights count. "Select room" / "Selected" button.
Variants
Standard — no image
Superior Room
- City view
- Rainfall shower
- Nespresso machine
- Free Wi-Fi
7 nights
£1,250
per person
Selected state
When selected={true}, the card shows a teal border + ring to confirm the room is chosen.
Overwater Bungalow
- Direct lagoon access
- Glass floor panel
- Butler service
- Outdoor deck
7 nights
£3,750
per person
With badge
Use badge to highlight promotions or editorial tags on the card image.
Premium Suite
- Ocean view
- Private pool
- Living room
- Butler service
7 nights
£5,200
per person
Grid of room types
Display multiple RoomTypeCards in a grid for the room-selection step:
Standard Room
7 nights
£1,100
per person
Deluxe Room
7 nights
£1,650
per person
Villa Suite
7 nights
£3,200
per person
States
| State | Appearance |
|---|---|
| Default | Grey border, shadow-kuoni-sm, white bg |
| Hover | shadow-kuoni-md lifts card |
| Selected | Teal border + teal ring-1 + shadow-kuoni-md |
| Select button — unselected | Teal outline button |
| Select button — selected | Teal filled button, "Selected" label |
Best practices
Use badge to highlight editorial picks or promotional options within a room selection grid.
'Best value' badge on the recommended option reduces decision fatigue.
Add a badge to every card in a grid — badges are only effective when they distinguish one option.
Too many badges dilute the signal — they must be used sparingly.
Connect onSelect to your booking state so the selected card gets selected=.
The teal ring makes it immediately clear which room is selected.
Render RoomTypeCards without wiring up the selected prop — the card will never show its selected state.
Without visual feedback, users cannot tell if their selection was registered.
Keep the amenities list to the 4-6 most distinctive features of the room.
Amenity list of 3-5 key features is scannable at a glance.
List every possible room feature in the amenities array.
A 12-item amenity list overwhelms — move extras to a detail drawer or expandable section.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name* | string | — | Room or accommodation type name. Shown as the card heading. |
| image | { src: string; alt: string } | — | Room image at 4:3 aspect ratio. If omitted, a BedDouble placeholder icon is shown. |
| bedConfig | string | — | Bed configuration description. e.g. "1 King bed" or "2 Twin beds". |
| capacity | number | — | Maximum guest count. Displayed as "Up to N guests". |
| amenities | string[] | [] | Array of included feature labels. Each renders with a green tick. |
| priceFrom | number | — | Numeric price. Displayed with currency symbol and priceBasis. |
| currency | string | '£' | Currency symbol prepended to the price. |
| priceBasis | string | 'per person' | Pricing basis shown below the price. e.g. "per person" or "per room". |
| nights | number | — | Duration shown above the price. e.g. "7 nights". |
| selected | boolean | false | When true, adds teal border + ring to the card and changes the button to "Selected" (filled). |
| onSelect | () => void | — | Called when the "Select room" button is clicked. Controls selected state from parent. |
| badge | string | — | Short text shown in a yellow pill on the top-left of the image. e.g. "Best value". |
| className | string | — | Additional Tailwind classes on the article element. |
Accessibility
Article element
Each card is an <article> element, which gives it the "article" landmark role. This allows screen reader users to jump between cards using landmark navigation.
Select button
The "Select room" / "Selected" button has aria-pressed={selected} to communicate toggle state. Its visible label changes between "Select room" and "Selected" to make state change perceivable without relying on colour alone.
Image alt text
Always provide descriptive alt text for the room image. The room name is already in the heading — alt should describe the visual content: "Overwater bungalow at sunset with steps leading into the lagoon" rather than "Overwater Bungalow".
Keyboard interaction
| Key | Action |
|---|---|
Tab | Navigate through room name link (if href set), Select room button |
Enter / Space | Activate the Select room button |
Related components
- Resort Card — one level up: choosing a resort before choosing a room type within it.
- Trip Card — the general commercial listing card for a full holiday offer, rather than a single room within one property.
- Card — the base card primitive RoomTypeCard extends with room-selection-specific structure.