Components

Flight Info

Beta

FlightInfo displays a single flight leg — departure airport, arrival airport, duration, stops indicator, and airline — in a compact, scannable format for booking summaries and itinerary pages.

British Airways · BA 133Economy

10:30LHRLondon Heathrow

9h 30m

Direct

00:45MLEMalé, Maldives

Purpose

FlightInfo communicates the key facts of a single flight leg without overwhelming the traveller. It appears in booking confirmation pages, holiday itinerary summaries, cart drawers, and PDF vouchers — anywhere a customer needs to know "when does my flight leave, when does it land, and is it direct?"

The component answers three questions at a glance:

Route — departure and arrival airports, with city names for clarity
Time — departure and arrival times, with a +1 day indicator when the arrival falls on the following calendar day
Quality — stops indicator (direct/1 stop/N stops), duration, airline, and cabin class

It does not handle multi-leg journeys directly. For a journey with a connection, render two FlightInfo components in sequence, separated by a layover block.

Usage

Reach for FlightInfo whenever a single flight leg's route, time, and quality need to be communicated compactly — it is purpose-built for this one job and is not a generic "trip summary" component. It typically sits inside booking confirmation pages, itinerary summaries, cart drawers, and PDF vouchers, usually stacked with a second FlightInfo for the return leg or repeated per connection.

Anatomy

British Airways · BA 133Economy

10:30LHRLondon HeathrowMon 14 Jul

9h 30m

Direct

00:45⁺¹MLEMalé, MaldivesTue 15 Jul

1
Departure block — IATA code in 24px bold, city name in 13px grey below. Departure time in 20px semibold above the code.
2
Flight line — Horizontal rule with an arrow indicating direction of travel. Duration sits centred above the line.
3
Stops indicator — Pill below the flight line: "Direct" in green, "1 stop" in orange, "2 stops" / "N stops" in grey.
4
Arrival block — IATA code in 24px bold, city name in 13px grey below. Arrival time in 20px semibold above the code. +1 label appended when arrival date differs from departure date.
5
Meta row — 13px grey row below the main route: airline name · flight number · cabin class. Separated by middle dots.

Variants

Direct flight

stops={0} renders the pill in green with the label "Direct". This is the highest-value signal for luxury travellers — direct flights command a premium and should be celebrated visually.

British Airways · BA 133Business Class

10:30LHRLondon Heathrow

9h 30m

Direct

00:45MLEMalé, Maldives

One stop

stops={1} renders the pill in amber/orange with "1 stop". The warm colour signals a compromise without alarming the traveller.

Emirates · EK 010Economy

09:15LHRLondon HeathrowSat 11 Oct

11h 15m

1 stop

06:30⁺¹CMBColombo, Sri LankaSun 12 Oct

Multiple stops

stops={2} or higher renders the pill in grey with "N stops". Grey communicates a neutral, factual status rather than an aspirational one. Use this sparingly — complex routings are not typical in Kuoni's luxury holiday products.

KLM · KL 1051Economy

07:40MANManchester

14h 15m

2 stops

22:55NBONairobi, Kenya

Overnight arrival (+1 day)

When arrivalDate differs from departureDate, a "+1" label appended to the arrival time alerts the traveller that they land on the following day. This is critical for long-haul routes to the Maldives, Sri Lanka, or Kenya where the flight crosses midnight.

Virgin Atlantic · VS 1234Premium Economy

21:45LHRLondon HeathrowMon 14 Jul

9h 45m

Direct

12:30⁺¹MLEMalé, MaldivesTue 15 Jul

States

Default

The component renders as a static display element with no interactive states — it is not a link or button. It sits flush on a white or light-grey card background.

Minimal (no airline metadata)

When airline, flightNumber, and cabinClass are all omitted, the meta row is hidden entirely and the component collapses to the route-only view. Use this in very compact contexts such as a cart drawer summary line.

14:20GVAGeneva

35m

Direct

14:55ZRHZurich

Best practices

Always pass both the IATA code and the city name. 'LHR' alone does not tell every traveller which London airport they are flying from.

City names clarify which airport — especially important for cities with multiple airports.

Don't

Omit departureCity and arrivalCity to create a compact display.

Code-only display leaves travellers guessing — 'NBO', 'MLE', 'CMB' are not universally known.

Pass both departureDate and arrivalDate for long-haul routes so the +1 indicator appears when the dates differ.

The +1 indicator prevents travellers from being surprised by a next-day arrival.

Don't

Omit arrivalDate on routes that cross midnight or cross day boundaries.

An arrival time without date context is ambiguous for overnight flights.

Render separate FlightInfo components for each leg of a multi-leg journey.

Two FlightInfo components with a layover block between them is the clearest pattern for connections.

Don't

Attempt to summarise a connecting itinerary inside a single FlightInfo component.

A single FlightInfo cannot accurately represent two legs — the times, airports, and stops all belong to distinct segments.

Include cabinClass whenever the booking data provides it. 'Business Class' and 'Premium Economy' are key selling points.

Cabin class is a premium signal for Kuoni customers — display it when known.

Don't

Show cabinClass on some flight rows but omit it on others within the same itinerary view.

Displaying cabin class only on some cards in a list creates an inconsistent, unpolished grid.

Props

Prop	Type	Default	Description
departureCode*	string	—	IATA airport code for the departure airport. Displayed in 24px bold. e.g. 'LHR', 'MAN', 'GVA'.
departureCity*	string	—	Full city or airport name shown in 13px grey below the departure code. e.g. 'London Heathrow'.
departureTime*	string	—	Scheduled departure time in 24-hour HH:MM format. e.g. '10:30', '21:45'.
departureDate	string	—	Human-readable departure date. e.g. 'Mon 14 Jul'. Used with arrivalDate to determine whether to show the +1 indicator.
arrivalCode*	string	—	IATA airport code for the arrival airport. e.g. 'MLE', 'NBO', 'CMB'.
arrivalCity*	string	—	Full city or airport name for the arrival airport. e.g. 'Malé, Maldives'.
arrivalTime*	string	—	Scheduled arrival time in 24-hour HH:MM format. A '+1' label is appended when arrivalDate differs from departureDate.
arrivalDate	string	—	Human-readable arrival date. When this differs from departureDate, a '+1' suffix appears next to the arrival time.
duration	string	—	Total flight duration displayed above the flight line. e.g. '9h 30m', '14h 15m'. Omit for very short transfers where duration is obvious.
stops	number	0	Number of stops. 0 renders a green 'Direct' pill. 1 renders an amber '1 stop' pill. 2 or more renders a grey 'N stops' pill.
airline	string	—	Airline name shown in the meta row below the route. e.g. 'British Airways', 'Emirates'.
flightNumber	string	—	Flight number shown in the meta row. e.g. 'BA 133', 'EK 010'.
cabinClass	string	—	Cabin class shown in the meta row. e.g. 'Economy', 'Premium Economy', 'Business Class', 'First Class'.
className	string	—	Additional Tailwind classes applied to the root element.

Accessibility

The component renders its information in a logical DOM order that matches the natural reading sequence for a flight:

Departure time
Departure airport code and city
Duration
Stops indicator
Arrival time (with "+1 day" if applicable)
Arrival airport code and city
Airline, flight number, cabin class

The visual layout places departure on the left and arrival on the right — the DOM order mirrors this left-to-right reading sequence so screen readers do not jump between sides.

IATA codes

Three-letter IATA codes (LHR, MLE) are read letter-by-letter by most screen readers, which is the correct pronunciation. If the component ever renders as part of a summary sentence, pair it with the city name in a visually hidden span to give full context.

Stops pill colour

The stops indicator uses colour (green / amber / grey) as a primary differentiator. Ensure the pill text ("Direct", "1 stop", "2 stops") is always present — colour is a supplement, not the sole signal.

+1 day indicator

The "+1" suffix next to the arrival time must have an aria-label of "next day" so screen reader users understand the meaning:

{/* The component renders this internally */}
<span aria-label="next day">+1</span>

Focus management

FlightInfo is a display-only component with no interactive elements. It does not receive focus and does not require keyboard interaction. If used inside a clickable container (e.g. a selectable flight option), ensure the parent handles focus and aria-selected state.

Card — FlightInfo is typically placed inside a Card when it needs its own bordered container in a summary layout.