ba-flight-details

ba-flight-details is for showing the important information for a flight

Figma

GitHub

Storybook

Live Demo

<ba-flight-details
  airport-name="London Heathrow Airport"
  airport-code="LHR"
  terminal="5"
  date-time="2024-01-01T14:48"
></ba-flight-details>

Guidelines

If you are showing the departure and arrival information for a flight, and the flight is arriving a day or more later. Do use the nextDayArrival to indicate how many days later the flight is arriving.

This component can be used as part of our trip summary pattern which allows you to show multiple flights and connections

If the flight has a stopover you must provide both the duration and location of the stopover for it to show in the component.

Both time and location should be shown to remove any ambiguity about the stop over and give the user all the information needed.

If however the stopover duration is not available, just show the location.

Code

The component handles the formatting of the date and time internally, so it only requires an ISO datetime string. It will also render the date in the correct format for the locale that is being used on the page.

Properties & Attributes

Property	Attribute	Description	Type	Default
`airportCode`	`airport-code`	The code of the airport	`string \| undefined`	`undefined`
`airportName`(required)	`airport-name`	The name of the airport	`string`	`undefined`
`dateTime`(required)	`date-time`	The date and time of the flight	`string`	`undefined`
`estimatedTime`	`estimated-time`	The estimated time of the flight	`string \| undefined`	`undefined`
`nextDayArrival`	`next-day-arrival`	Whether the flight is arriving the next day	`string \| undefined`	`undefined`
`stopDurationHours`	`stop-duration-hours`	The duration of the stop in hours	`string \| undefined`	`undefined`
`stopDurationMinutes`	`stop-duration-minutes`	The duration of the stop in minutes	`string \| undefined`	`undefined`
`stopLocation`	`stop-location`	The location of the stop	`string \| undefined`	`undefined`
`terminal`	`terminal`	The terminal of the airport	`string \| undefined`	`undefined`
`type`	`type`	Whether the flight is arriving or departing	`"arriving" \| "departing" \| undefined`	`'arriving'`

No slotted content available for this component.

Parent components

ba-flight-details can be slotted into:

Usage

Basic usage

Showing a single flights details

A basic example of ba-flight-details

<ba-flight-details
  airport-name="London Heathrow Airport"
  airport-code="LHR"
  terminal="5"
  date-time="2024-01-01T14:50"
></ba-flight-details>

Showing a delayed flight

Showing a single flight that is delayed

Delayed flight

  <ba-flight-details
    airport-name="London Heathrow Airport"
    airport-code="LHR"
    terminal="5"
    date-time="2024-01-01T14:48"
    estimated-time="01:00"
  ></ba-flight-details>

Departure and arrival

Showing departure and arrival details

A basic example departure and arrival details

<ba-grid columns-800vw="2">
    <ba-flight-details
      type="departing"
      airport-name="London Heathrow Airport"
      airport-code="LHR"
      terminal="5"
      date-time="2024-01-01T14:48"
    ></ba-flight-details>
    <ba-flight-details
      airport-name="Singapore Changi Airport"
      airport-code="SIN"
      terminal="1"
      date-time="2024-01-02T22:00"
      next-day-arrival="1"
    ></ba-flight-details>
  </ba-grid>

Showing a flight with a stop

Showing a flight that contains a stop

Flight with a stop

  <ba-flight-details
    type="departing"
    airport-name="London Heathrow Airport"
    airport-code="LHR"
    terminal="5"
    date-time="2024-01-01T14:48"
    stop-duration-hours="1"
    stop-duration-minutes="30"
    stop-location="Dubai"
  ></ba-flight-details>