Travel Booking — Allowed

This gauge covers Chapter 21: customer-facing travel booking layouts after Storefront, Admin UI, Tables, and Forms.

Learning goal

Compose travel booking surfaces — agency chrome, booking search, fare catalogs, experience and stay detail pages, compare matrices, and booking checkout — while keeping native controls and accessible names.

Inherited tools

Everything allowed through ../storefront/allowed.md remains available, including forms from Chapter 12 and tables and lists from Chapter 13. Layout tools from Flexbox, Grid, Responsive, Positioning, Variables, and Pseudo-classes may be used as needed for agency chrome.

New presentation patterns

• Agency shell: top navigation with booking verticals (Hotel / Flight / Trip), site footer
• Booking search chrome: trip-type radios, From/To fields, native date inputs, traveler select, submit action
• Fare catalog: filter aside with fieldsets beside fare result rows (airline, times, duration, stops, price, Select)
• Experience detail: title, price per person, meta, overview, numbered itinerary, included/excluded lists, sticky book box
• Stay rooms: hotel header, in-page section nav, room cards with amenities and price, sticky stay summary
• Stay compare: attribute matrix as a real table
• Booking checkout: guest and payment fieldsets beside a sticky booking summary

Learning rules

1. Keep one visible main for the primary booking content.
2. Agency navigation and footer sit outside or around main the same way as the storefront shell. Name each nav region.
3. Booking search uses native input, select, and radio groups with visible labels. Do not replace date fields with third-party pickers in this chapter.
4. Filter groups use fieldset and legend. Keep visible labels on every control; placeholders are examples, not names.
5. Fare rows and compare matrices use clear structure: list rows with headings or a real table. Do not use tables for page layout.
6. Sticky book boxes, stay summaries, and checkout summaries must remain keyboard-reachable in source order.
7. Room cards and fare rows may use card elevation because they are the unit of booking interaction. Do not wrap the entire page in nested decorative cards.
8. Plan, cabin, and payment choices are radio groups or native selects with helper text.
9. Prefer CSS variables for surface, border, muted text, price, and badge fills.
10. Status, promoted, and discount badges use text as well as colour.

Not allowed

• JavaScript for filters, search, totals, tabs, or checkout steps
• Third-party widgets (Choices, Flatpickr, rich-text editors, List.js)
• Custom controls that replace native inputs, selects, textareas, or buttons
• Essential instructions shown only in placeholders
• Positive tabindex values except the inherited table scroll wrapper pattern from Chapter 13 (tabindex="0" on a labelled overflow region)
• Inline styles
• Any HTML or CSS not inherited or listed for presentation above

Pages

• 01-agency-shell-search.html — agency nav, footer, booking search chrome
• 02-fare-catalog.html — filter aside plus fare result rows
• 03-experience-detail.html — itinerary, lists, sticky book box
• 04-stay-rooms.html — room cards and sticky stay summary
• 05-stay-compare.html — hotel attribute compare table
• 06-booking-checkout.html — guest, payment, sticky booking summary

Rules to lean on

Rules 2, 10, 34–38, 54–59, 72–80, 99–110, 111–122, 135–144, 175–195, 196–204, and travel booking rules added for Chapter 21.