ba-flight-details

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

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

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

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

Slots

Slot	Description	Permitted elements

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