Component

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

Airframe

Active

Figma

Web Components

Active

Storybook

Github

React

Planned

React Native

Planned

Design

Code

Accessibility

Anatomy

Image

The promotional image that visually represents the destination or offer, supporting responsive image loading through srcset attributes

Tag (optional)

An optional ba-tag component positioned at the top of the text box, used to highlight special offers or features

Pre-text (optional)

Contextual text displayed above the price, such as 'Flights from' or 'Starting at'

Price

The primary promotional price displayed prominently with currency symbol or code

Sub-text (optional)

Additional details displayed below the price, such as 'Return, from London, Jan 2028'

Design Documentation

Image choices should always be related to the card content, e.g. photos of relevant destinations etc.

Avoid using images that are too busy or distracting, as this can take attention away from the card's main message.

Some currencies have longer symbols or names, which may cause the ba-card-promo to wrap or overflow, reducing the amount of image that is visible.

Test the ba-card-promo with different currencies to ensure it displays correctly and leaves enough space for longer prices. If the currency is too long, consider increasing the width of the card.

If the content is dynamic (e.g., price updates), test the component with a variety of realistic price ranges and text lengths to avoid layout issues like overflow or wrapping.

Avoid excessively long pre-text or sub-text, as this may crowd the design or confuse users. Keep these concise to maintain clarity.

Live Demo

<ba-card-promo
  href="https://ba.com"
  pre-text="Flights from"
  price="£1234"
  sub-text="Return, from London, Jan 2028"
  alt="Description of image"
  src="https://www.britishairways.com/assets/images/MediaHub/Media-Database/Royalty-free-RF/Destinations/USA/Florida/Orlando-MCO/524927017_1920x1080.jpg"
></ba-card-promo>

Properties and attributes

Property	Attribute	Description	Type	Default
`alt`(required)	`alt`	The `'alt'` attribute defines the alternative text for the image	`string`	`undefined`
`aspectRatio`	`aspect-ratio`	Defines a set aspect ratio for the image	`"16-9" \| "4-3" \| undefined`	`'16-9'`
`aspectRatio1024vw`	`aspect-ratio-1024vw`	Optional to change the aspect ratio for the image when the viewport is over 1024px(64rem) wide.	`"1-1" \| "16-9" \| "3-4" \| "4-3" \| "9-16" \| undefined`	`undefined`
`href`(required)	`href`	Url to link to	`string`	`undefined`
`preText`	`pre-text`	Text to display before the price. (Optional - Required if no subText)	`string \| undefined`	`undefined`
`price`(required)	`price`	Price to display	`string`	`undefined`
`sizes`	`sizes`	This defines the sizes values up to 1024px(64rem) wide	`string \| undefined`	`undefined`
`sizes1024vw`	`sizes-1024vw`	This defines the sizes values over 1024px(64rem) wide	`string \| undefined`	`undefined`
`src`(required)	`src`	The image URL to show up to 1024px(64rem) wide	`string`	`undefined`
`src1024vw`	`src-1024vw`	Optional image URL to show over 1024px(64rem) wide	`string \| undefined`	`undefined`
`srcSet`	`srcset`	The srcset values to show up to 1024px(64rem) wide	`string \| undefined`	`undefined`
`srcSet1024vw`	`srcset-1024vw`	The srcset values to show over 1024px(64rem) wide	`string \| undefined`	`undefined`
`subText`	`sub-text`	Text to display after the price. (Optional - Required if no preText)	`string \| undefined`	`undefined`

Permitted ARIA roles

listitem

Slots

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

Parent components

ba-card-promo can be slotted into:

Events

Event	Description	Type
`baClick`	Emitted when the card is clicked, allowing custom navigation behavior in single page applications	`CustomEvent<{ preventDefault: () => void }>`

Usage

Using srcSet (recommended)

Srcset can be used to supply different image file sizes for different screen sizes. The browser will automatically decide which image to download depending on the device size and pixel density

Loading a different image file sizes at screen widths

<ba-card-promo
  ... 
  srcset="image-at-600x450.webp 600w, image-at-480x360.webp 480w, image-at-320x240.webp 320w"
  srcset-1024vw="image-at-2048x1536.webp 2048w, image-at-1024x768.webp 1024w"
></ba-card-promo>

Basic usage

This is the basic usage of the ba-card-promo component, which includes an image, pre-text, price, and sub-text.

Only use this in situations where you can't provide different sized images via srcset and sizes

A promo card with 16-9 image, pre text, price and sub text

<ba-card-promo
  href="/url"
  pre-text="Flights from"
  price="£1234"
  sub-text="Return, from London, Jan 2028"
  alt="Description of image"
  src="https://example.com/image.jpg"
></ba-card-promo>

Changing the aspect ratio between small and large screens

You can change the aspect ratio of the image when the viewport is over 1024px (64rem) wide by using the aspect-ratio-1024vw attribute. This allows you to specify a different aspect ratio for larger screens.

A card with an image that changes aspect ratio on larger screens

<ba-card-promo
  ...
  aspect-ratio="16-9"
  aspect-ratio-1024vw="4-3"
></ba-card-promo>

Adding a tag

A tag can be added by using the tag slot. The tag will be positioned at the top of the text box.

A promo card with a sale tag

<ba-card-promo>
  <ba-tag slot="tag" variant="sale">Tag</ba-tag>
</ba-card-promo>

Usage in a single page application

The baClick event can be used to prevent default navigation and implement custom routing behavior in single page applications.

baClick event being used in single page application routing

<ba-card-promo></ba-card-promo>

<script>
  document.querySelector('ba-card-promo').addEventListener('baClick', (event) => {
    event.detail.preventDefault();
    // Now apply custom SPA routing...
  });
</script>

Guidelines

Always provide alternative text for images used in the ba-card-promo component. This ensures that users who rely on screen readers can understand the content and context of the images

While the pre-text and sub-text slots are optional, use at least one to provide context and ensure the link is clear and understandable to all users

Using the ARIA list and listitem roles a screen reader will let users know how many cards there are and provide tools to navigate between them

Example

<div role="list">
  <ba-card-promo role="listitem">...</ba-card-promo>
  <ba-card-promo role="listitem">...</ba-card-promo>
  <ba-card-promo role="listitem">...</ba-card-promo>
  ...
</div>

State: ba-card-promo does not have focus

⇥ Tab

ba-card-promo receives focus

State: ba-card-promo has focus

⏎ Enter

Navigates to the href destination

␣ Space