Component

ba-flight-line

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

Airframe

Active

Figma

Web Components

Active

Storybook

Github

React

Planned

React Native

Planned

Design

Code

Accessibility

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

Anatomy

Departure airport

The departure airport name and IATA code

Departure terminal

The terminal for the departure airport

Departure time

The time of departure

Duration and stops

The duration of the flight and the number of stops/connections

Airlines / carriers

The airline(s) operating the flight

Dots / connections graphic

A visual representation of the flight's stops and connections

Arrival airport

The arrival airport name and IATA code

Arrival terminal

The terminal for the arrival airport

Arrival time

The time of arrival

Arrival day

The arrival day, if applicable

Design Documentation

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.

Live Demo

<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>

Properties and attributes

Property	Attribute	Description	Type	Default
`airlineLogo`	`airline-logo`	Logo for the airline for flight	`CarrierName \| 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'`

Permitted ARIA roles

None

Slots

No slotted content available for this component.

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>

Guidelines

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.

No keyboard interactions have been defined for this component.

Usage and accessibility checklist

Use this checklist to confirm the component has been configured and used correctly.

UX checklist

Both sides of the flight line contain the same information (e.g. both have airport codes, both have times, etc.)
For multi-stop routes, the name and logo of the first carrier with '+number other(s)' is shown (e.g. British Airways +2 other(s))
Departure and arrival airports are displayed in the same format throughout
If displaying estimated times, both departure and arrival estimated times are shown

Accessibility checklist

The font size can be increased to 200% in multiple languages without breaking the layout
Test with realistic airport names, codes, and time formats

These checks are handled by the component and do not need to be repeated each time it is used.

Information is readable by screen readers with departure information read first, followed by arrival information
Colour contrast for all states in all BAgel themes
High contrast mode adjustments for stops/connections graphic