Airframe GitHub Storybook
Component New

ba-cabin-class

A button to select a specific cabin class during a booking flow

Airframe

Active
Figma

Web Components

Active
Storybook Github

React

Planned

React Native

Planned Design Code Accessibility QA

Anatomy

A

Cabin class variant

The type of cabin class for the button. The name and background change based on the variant.
B

Pre text

A short concise line of text to give more meaning to the button
C

Price

The price to show for the cabin-class
D

Sub text

Text to give extra meaning to the button

Design Documentation

Any text added to the component must be short and concise. This helps quickly get the intent across and stops them from taking up too much room

ba-cabin-class is designed to work alongside ba-cabin-class-group. The parent component gives structure to the cabin-class buttons and also allows the use of ba-flight-line next to them.

Live Demo 

<ba-cabin-class-group>
  <ba-cabin-class
    pre-text="From"
    price="£1330"
    sub-text="Lowest price in the last 7 days"
    variant="economy"
  >
    <ba-carousel desktop-slides="2">
      <ba-card>
        <ba-content>
          <h4>Economy Basic</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            suscipit auctor dui, at fermentum ligula.
          </p>
        </ba-content>
      </ba-card>
      <ba-card>
        <ba-content>
          <h4>Economy Standard</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            suscipit auctor dui, at fermentum ligula.
          </p>
        </ba-content>
      </ba-card>
      <ba-card>
        <ba-content>
          <h4>Economy Select</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            suscipit auctor dui, at fermentum ligula.
          </p>
        </ba-content>
      </ba-card>
    </ba-carousel>
  </ba-cabin-class>
  <ba-cabin-class
    pre-text="From"
    price="£1330"
    sub-text="Lowest price in the last 7 days"
    variant="premium-economy"
  >
    <ba-carousel desktop-slides="2">
      <ba-card>
        <ba-content>
          <h4>Premium Economy Basic</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            suscipit auctor dui, at fermentum ligula.
          </p>
        </ba-content>
      </ba-card>
      <ba-card>
        <ba-content>
          <h4>Premium Economy Standard</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            suscipit auctor dui, at fermentum ligula.
          </p>
        </ba-content>
      </ba-card>
      <ba-card>
        <ba-content>
          <h4>Premium Economy Select</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            suscipit auctor dui, at fermentum ligula.
          </p>
        </ba-content>
      </ba-card>
      <ba-card>
        <ba-content>
          <h4>Premium Economy Select Pro</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            suscipit auctor dui, at fermentum ligula.
          </p>
        </ba-content>
      </ba-card>
    </ba-carousel>
  </ba-cabin-class>
  <ba-cabin-class
    pre-text="From"
    price="£1330"
    sub-text="Lowest price in the last 7 days"
    variant="business"
  >
    <ba-carousel desktop-slides="2">
      <ba-card>
        <ba-content>
          <h4>Business Basic</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            suscipit auctor dui, at fermentum ligula.
          </p>
        </ba-content>
      </ba-card>
      <ba-card>
        <ba-content>
          <h4>Business Standard</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            suscipit auctor dui, at fermentum ligula.
          </p>
        </ba-content>
      </ba-card>
      <ba-card>
        <ba-content>
          <h4>Business Select</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            suscipit auctor dui, at fermentum ligula.
          </p>
        </ba-content>
      </ba-card>
    </ba-carousel>
  </ba-cabin-class>
</ba-cabin-class-group>

Properties and attributes

Property Attribute Description Type Default
open open Whether the content is open or not boolean | undefined false
preText(required) pre-text The pre text of the button string undefined
preTextVariant pre-text-variant The variant for the pre text "default" | "sale" | "success" | undefined 'default'
price(required) price The price of the cabin string undefined
subText(required) sub-text The sub text of the button string undefined
subTextVariant sub-text-variant The variant for the sub text "default" | "sale" | "success" | undefined 'default'
variant variant The type of cabin class, which determines the styling and text of the button header "business" | "economy" | "first" | "premium-economy" | undefined 'economy'

Permitted ARIA roles

  • None

Slots

Slot Description Permitted elements
Unnamed slot Elements will render in the body of the component <ba‑carousel>
"tag" Elements will render in the body of the component <ba‑tag>

Parent components

ba-cabin-class can be slotted into:

ba-cabin-class-group

Slots

Slot Description Permitted elements
Unnamed slot Elements will render in the body of the component <ba‑cabin‑class>
"flight-line" Elements will render in the body of the component <ba‑flight‑line>

Parent components

ba-cabin-class-group can be slotted into:

Usage

Basic usage

ba-cabin-class should always be used with its parent component ba-cabin-class-group

Basic usage with ba-cabin-class-group
<ba-cabin-class-group>
<ba-cabin-class
    pre-text="From"
    price="£1330"
    sub-text="Lowest price in the last 7 days"
    variant="economy">
</ba-cabin-class>
<ba-cabin-class
    pre-text="From"
    price="£1330"
    sub-text="Lowest price in the last 7 days"
    variant="premium-economy">
</ba-cabin-class>
</ba-cabin-class-group>

Adding tags

A tag can be slotted into ba-cabin-class to bring emphasis to a certain cabin type

Using a tag in the tag slot
<ba-cabin-class-group>
<ba-cabin-class
    pre-text="From"
    price="£1330"
    sub-text="Lowest price in the last 7 days"
    variant="economy">
<ba-tag slot="tag" variant="success" size="small">Best Seller</ba-tag>
</ba-cabin-class>
<ba-cabin-class
    pre-text="From"
    price="£1330"
    sub-text="Lowest price in the last 7 days"
    variant="premium-economy">
<ba-tag slot="tag" variant="success" size="small">Best Seller</ba-tag>
</ba-cabin-class>
</ba-cabin-class-group>

Usage with ba-flight-line

The ba-flight-line component can also be used alongside the ba-cabin-class component

Usage with ba-flight-line
<ba-cabin-class-group>
<ba-flight-line
    slot="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"
    airline-text="British Airways">
</ba-flight-line>

<ba-cabin-class
    pre-text="From"
    price="£1330"
    sub-text="Lowest price in the last 7 days"
    variant="economy">
<ba-tag slot="tag" variant="success" size="small">Best Seller</ba-tag>
</ba-cabin-class>
<ba-cabin-class
    pre-text="From"
    price="£1330"
    sub-text="Lowest price in the last 7 days"
    variant="premium-economy">
<ba-tag slot="tag" variant="success" size="small">Best Seller</ba-tag>
</ba-cabin-class>
</ba-cabin-class-group>

React documentation coming soon.

React Native documentation coming soon.

Guidelines

When using the ba-cabin-class on themed backgrounds, the colour contrast ratio of the button header may not pass against some themes.

It is acceptable if the button header colour doesn't meet the required contrast ratio, since the header is purely decorative. The user can still get all the necessary information from the text supplied by the component.

Further reading:

Keyboard navigation

State: Previous element in DOM has focus

⇥ Tab

Focus is moved to the first ba-cabin-class button

State: ba-cabin-class has focus

⏎ Enter

ba-cabin-class shows a selected state and it's content opens below it
⇥ Tab

The content of the open ba-cabin-class gets focus

State: ba-cabin-class has focus and is open

⏎ Enter

ba-cabin-class closes its content and no longer has a selected state
⇥ Tab

The next ba-cabin-class element gets focus

Usage and accessibility checklist

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

UX checklist

  • Text is short and concise

Accessibility checklist

  • The component has discernible, descriptive text
  • Is reachable using assistive technology
  • Button has not been disabled
  • Focus indicator has not been obscured on all sides of the button
  • Button is reachable using assistive technology

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

  • Component is operable using assistive technology
  • Has a visible focus indicator on all sides of the button
  • Colour contrast for all states in all BAgel themes
  • Animations respect users' reduced motion settings
  • High contrast mode adjustments
Designing Developing Components BAgel helper QA process britishairways.com Careers Cookie policy