ba-flight-line

The Flight Line provides a clear, concise, visual summary of a flight’s key details, including arrival, duration, times, and stops

Figma GitHub Storybook

Picking between ba-flight-line and the trip summary pattern

The Flight Line shows a minimal, visual summary of a direct flight or a one-way trip with multiple legs. It can be used to communicate any connections and/or stops involved in the flight.

For more detailed breakdowns, the Trip Summary pattern is the recommended solution

Trip summary pattern

<ba-flight-line
  variant="large"
  stops="3"
  departure-airport-name="London Heathrow"
  departure-airport-code="LHR"
  departure-time="12:34"
  arrival-airport-name="San Francisco International"
  arrival-airport-code="SFO"
  arrival-time="01:23"
  next-day-arrival="1"
  duration-hours="6"
  duration-minutes="45"
  airline-logo="british-airways"
  airline-text="British Airways"
></ba-flight-line>

When displaying flight details, ensure that the departure and arrival airports are displayed in the same format. For example, if you show the departure airport code, include the arrival airport code. If you display an estimated departure time, do the same for arrival.

Consistency helps users compare details quickly and reduces confusion.

Display only the first carrier’s logo, and add text using the pattern: “British Airways +2 other(s).” This approach preserves visual simplicity while clearly communicating that multiple carriers are involved.

Because there can be a lot of information in the Flight Line, design with enough room to handle 200% text scaling in English and other languages without breaking the layout.

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`airlineLogo`	`airline-logo`	Logo for the airline for flight	`string \| undefined`	`'default'`
`airlineText`	`airline-text`	Airline name(s) for flight	`string \| undefined`	`undefined`
`arrivalAirportCode`	`arrival-airport-code`	The code of the arrival airport	`string \| undefined`	`undefined`
`arrivalAirportName`(required)	`arrival-airport-name`	The name of the arrival airport	`string`	`undefined`
`arrivalAirportTerminal`	`arrival-airport-terminal`	The terminal of the arrival airport	`string \| undefined`	`undefined`
`arrivalTime`	`arrival-time`	The time of arrival (or scheduled arrival if estimated is also provided). Required if arrivalTimeEstimated is not provided	`string \| undefined`	`undefined`
`arrivalTimeEstimated`	`arrival-time-estimated`	Estimated arrival time	`string \| undefined`	`undefined`
`connections`	`connections`	How many connections there are in the flight	`number \| undefined`	`undefined`
`departureAirportCode`	`departure-airport-code`	The code of the departure airport	`string \| undefined`	`undefined`
`departureAirportName`(required)	`departure-airport-name`	The name of the departure airport	`string`	`undefined`
`departureAirportTerminal`	`departure-airport-terminal`	The terminal of the departure airport	`string \| undefined`	`undefined`
`departureTime`	`departure-time`	The time of departure (or scheduled departure if estimated is also provided). Required if departureTimeEstimated is not provided	`string \| undefined`	`undefined`
`departureTimeEstimated`	`departure-time-estimated`	Estimated departure time	`string \| undefined`	`undefined`
`durationHours`	`duration-hours`	How long the flight is - hours (required if durationMinutes is not provided)	`string \| undefined`	`undefined`
`durationMinutes`	`duration-minutes`	How long the flight is - minutes (required if durationHours is not provided)	`string \| undefined`	`undefined`
`nextDayArrival`	`next-day-arrival`	Whether the flight is arriving the next day	`string \| undefined`	`undefined`
`stops`	`stops`	How many stops there are in the flight	`number \| undefined`	`undefined`
`variant`	`variant`	Size of the time	`"large" \| "small" \| undefined`	`'small'`

Slots

Slot	Description	Permitted elements

Permitted ARIA roles

None

Parent components

ba-flight-line can be slotted into:

Usage

Basic usage

Most scenarios will require airport names, codes, times, and durations

Showing a flight from London to San Francisco

<ba-flight-line
  departure-airport-name="London Heathrow"
  departure-airport-code="LHR"
  departure-time="14:21"
  arrival-airport-name="San Francisco International"
  arrival-airport-code="SFO"
  arrival-time="01:23"
  duration-hours="3"
  duration-minutes="23"
></ba-flight-line>

Multi-leg trip variants

Stops and connections can be shown with the stops and connections attributes. The stops graphic will update to show the total number of stops + connections

A flight that has 2 stops and 1 connection

<ba-flight-line
  departure-airport-name="London Heathrow"
  departure-airport-code="LHR"
  departure-time="14:21"
  arrival-airport-name="San Francisco International"
  arrival-airport-code="SFO"
  arrival-time="01:23"
  duration-hours="3"
  duration-minutes="23"
  stops="2"
  connections="1"
></ba-flight-line>

Delays

Delays can be shown with the departure-time-estimated and arrival-time-estimated attributes. If the departure-time and arrival time are also provided they will be shown as scheduled below the estimated times

Use departure-time-estimated to communicate the updated time, while departure-time remains the originally scheduled time

A flight that has been delayed showing the estimated time of departure and arrival as well as the original times it was scheduled

<ba-flight-line
  departure-airport-name="London Heathrow"
  departure-airport-code="LHR"
  departure-time="14:21"
  arrival-airport-name="San Francisco International"
  arrival-airport-code="SFO"
  arrival-time="01:23"
  duration-hours="3"
  duration-minutes="23"
  departure-time-estimated="14:45"
  arrival-time-estimated="01:45"
></ba-flight-line>

Will read all of the departure information on the left and then all arrival information on the right

High contrast mode users

The stops / connections graphic will change to the current text colour

UX Criteria

Both sides of the flight line contain the same information (e.g. both have airport codes, terminal numbers, etc.)
For multi stop routes, the name and logo of the first carrier with ‘+number other(s)’. is shown (e.g. British Airways +1 other)
The airline logo is not shown if the airline text is not provided

Accessibility Criteria

The font size can be increased to 200% in multiple languages without breaking the layout