18 interactive components for travel & transport interfaces. All components follow the dh-tr-* class convention, are fully dark-themed, and require no external dependencies.
Tabbed booking form supporting 7 transport modes. Trip-type pills, from/to swap, and search button all update dynamically per mode.
3-column pricing grid with recommended highlight. Click any card to select it. Excluded features show with strikethrough.
Monthly grid calendar with per-day pricing. Green = cheapest, coral tint = priciest. Click any day to select. Prev/next month navigation.
Aircraft layout with business (2-2) and economy (3-3) seating, aisle gap, exit rows, and pre-occupied seats. Click to select.
Journey leg card with carrier header, origin→destination track, duration, stops, and footer with class and price.
Monospace dark display with live HH:MM:SS clock. Status rows color-coded: boarding (pulsing sky), on-time (green), delayed (amber), cancelled (coral).
| Time | Flight | Route | Status | Gate |
|---|---|---|---|---|
| 14:30 | AA 171 | New York JFK | ● Boarding | B22 |
| 15:05 | BA 113 | Los Angeles LAX | On Time | A14 |
| 15:40 | LH 902 | Frankfurt FRA | Delayed +45m | C07 |
| 16:10 | EK 003 | Dubai DXB | On Time | D34 |
| 16:55 | FR 4402 | Barcelona BCN | Cancelled | — |
| 17:20 | SQ 322 | Singapore SIN | On Time | F01 |
Vertical timeline with transport-type node variants and stagger reveal on scroll. Steps animate in with 80ms delay each.
Navy gradient card with perforated tear line, large serif city codes, 4-col detail grid, and programmatic QR + barcode.
Printable ticket with navy header, 2-col detail grid, dashed separator, programmatic QR and barcode. Header color overrides for different modes.
Progress bar with vehicle emoji at current position, stop labels (reached / current / upcoming), live pulse dot, and ETA row.
Dark pill-shaped strip with map placeholder, pinging location animation, large ETA time, and driver info with contact buttons.
Left-border color-coded disruption alerts. 4 severity types — critical, warning, info, success. Dismiss with slide-out animation.
Segmented fill bar for booked vs reserved vs available seats. Animates from 0 on init using data attributes.
Profile card for rideshare drivers, bus operators, ferry captains with rating, stats, vehicle info, and contact buttons.
Browsable vehicle cards with hero area (emoji + gradient), capacity spec, and mode badge. Hover lifts card. Click dispatches event.
Horizontal flex-wrap icon chips for onboard services. Unavailable items show with strikethrough. Hover brightens sky-blue border.
Aggregate score with breakdown bars (animated from 0 on init). Filter by star rating. Individual review cards with avatar and verified badge.
Tier row of bag items. Included (green border), extra clickable (amber — toggle to add), unavailable (dim + strikethrough). Dispatches add/remove events.