Components

ba-accordion

We use accordions to hide or show content under an interactive heading

ba-button

Buttons are used for in page interactions such as submitting a form or showing/hiding content

ba-card

Cards are used for aggregating groups of content together. They are easy to browse and can be used in a variety of instances across the products for a multitude of use cases

ba-card-promo

We use the ba-card-promo component to use imagery to promote prices and link to a page where the user can find more information or make a purchase

ba-card-segmented

A card that organizes content with a header and footer for clearer structure. Ideal for grouping content with contextual information, and presenting it in a scannable layout

ba-chart-price

Provides customers with a visual representation of prices, allowing them to easily identify and select their preferred option

ba-checkbox

A form field for single and multiple selections

ba-checkbox-card

An enhanced checkbox component with a description area for additional context

ba-checkbox-list

A form field for selecting multiple options from a list

ba-content

This component applies our typography styling to text elements and controls the vertical rhythm between copy and other components

ba-copy-to-clipboard

Enables users to copy important short codes and reference numbers to their clipboards

ba-date

Renders the inputted date in the correct format for the current locale

ba-details

ba-details is used for standalone disclosure of secondary information

ba-download

The ba-download component provides an intuitive way for users to download files

Deprecated
ba-entry

When offering a user many options on how to proceed through their journey, we use stacked entry links over buttons.

ba-filter

A wrapper component for displaying a filter

ba-filter-checkbox

A checkbox filter component

ba-filter-radio

A radio filter component

ba-flex

This component provides a flex layout for items should be laid out side by side, or that can wrap onto the next line.

ba-flight-details

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

ba-flight-line

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

ba-flight-number

A simple component to show a customers flight number and the logo of the airline they are flying with.

ba-footer

ba-footer is used to show a footer at the bottom of the page with links, social icons and copyright info

ba-form

ba-form is used to handle form interactions when using our other form elements

ba-form-group

ba-form-group is used to show that group of form elements are related

ba-form-group-dropdown

ba-form-group-dropdown is used to show/hide a group of related form elements

ba-grid

This component provides the internal structure of our pages by aligning elements to our grid and automatically setting the correct sizes and spacing

Deprecated
ba-header

A header component with options to show search, login, navigation, current country and language

ba-header-global

A header component with options to show search, login, navigation

ba-hero

Place an image, title, sub-heading, and key details at the top of a page

ba-icon

Use ba-icon to display an icon from our icon library

ba-image

A wrapper around the native img element that improves image performance and ensures images are displayed consistently

ba-inline-list

Dotted list for presenting details in a concise layout.

Deprecated
ba-input

A generic form input that can be used in a variety of input types

ba-input-date

A form field for entering dates

ba-input-datepicker

ba-input-email

A form field for entering email addresses

ba-input-number

A form field for entering numbers

ba-input-password

An input field which enables customers to enter a password

ba-input-phone-number

A form field for entering international phone numbers

ba-input-stepper

Input steppers are form controls that allow users to select a number within a small range of consecutive values

ba-input-text

A form field for entering small amounts of text

ba-input-textarea

The textarea component provides a form control for long-form text input

ba-input-typeahead

ba-input-typeahead is the combination of a textfield and an associated dropdown that allows the user to filter a list when selecting an option.

ba-input-upload

A form field for uploading files via dragging & dropping or click to upload

ba-link

We use ba-link to help users navigate web pages

ba-link-back

This component allows a user to choose to go back to a previous point or page

ba-link-entry

When offering a user many options on how to proceed through their journey, we use stacked link entrys over buttons.

ba-link-price

We use the ba-link-price component to promote prices and link to a page where the user can find more information or make a purchase

ba-loading-page

Use ba-loading-page to show a full screen loading banner

ba-loading-skeleton

Use ba-loading-skeleton to show a loading animation on individual sections

ba-logo

Used to display logos for British Airways and other brands

ba-media-object

Used to show some media and content side by side

ba-message

Messages are used to communicate short pieces of important information

ba-message-global

A message that sits at the top of page to communicate important information. For example flight disruptions and important operational updates

Deprecated
ba-modal

An overlay to display information preventing interaction with the underlying page until it is closed

ba-page-segment

This component is used to group related content and provide structure to our pages

ba-radio

A basic radio button component with a label, for use within ba-radio-group

ba-radio-card

An enhanced radio button component with a description area for additional context, intended for use within ba-radio-group

ba-radio-group

A container component for grouping multiple ba-radio and ba-radio-card components into a single form field, providing users with a clear choice of options

ba-select

A form field for giving users a choice from a dropdown

ba-sort

A form field for giving users a choice from a dropdown on how to sort displayed data

ba-star-rating

A component for presenting a star rating out of 5

ba-tab-chip

A tab component (styled as a chip) which allows the user to select a single option from a selection of categories.

New
ba-tab-container

A tab component for showing groups of content

ba-tag

To indicate an items status or indicating the state of something. For example the status of a flight, or the British Airways Club tiers

ba-toolbar

A wrapper component for displaying multiple filters