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

GitHub

Storybook

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>

Guidelines

Images choices should always be related to the card content, eg. 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.

Accessibility

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>

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`dropShadow`	`drop-shadow`	Toggles a drop shadow on the card	`boolean \| undefined`	`false`
`tagText`	`tag-text`	Text to display on the tag, this will only display if an image is present	`string \| undefined`	`undefined`

Slots

Slot	Description	Permitted elements
Unnamed slot	Elements will render in the body of the component	`<ba‑content>`, `<ba‑copy‑to‑clipboard>`, `<ba‑flex>`, `<ba‑flight‑line>`, `<ba‑form>`, `<ba‑form‑group>`, `<ba‑form‑group‑dropdown>`, `<ba‑grid>`, `<ba‑input>`, `<ba‑input‑date>`, `<ba‑input‑datepicker>`, `<ba‑input‑email>`, `<ba‑input‑number>`, `<ba‑input‑password>`, `<ba‑input‑phone‑number>`, `<ba‑input‑stepper>`, `<ba‑input‑text>`, `<ba‑input‑textarea>`, `<ba‑input‑typeahead>`, `<ba‑input‑upload>`, `<ba‑loading‑skeleton>`, `<ba‑media‑object>`, `<ba‑radio‑group>`, `<ba‑select>`, `<fieldset>`, `<form>`
`"image"`	Component to show at the top of the card	`<ba‑image>`
`"action"`	Interactive elements to show at the bottom of the card	`<ba‑button>`, `<ba‑details>`, `<ba‑download>`, `<ba‑link>`, `<ba‑link‑price>`, `<ba‑loading‑skeleton>`

Permitted ARIA roles

listitem

Parent components

ba-card-promo can be slotted into:

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="https://ba.com"
  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

baClick event being used in single page application routing

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

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