Component

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

Airframe

Active

Figma

Web Components

Active

Storybook

Github

React

Planned

React Native

Planned

Design

Code

Accessibility

Anatomy

Tag (optional)

Text overlay positioned at the top-left corner of the media area, used to highlight special states or categories (e.g., "New", "Popular")

Media slot (optional)

Container for visual content such as ba-image displayed at the top of the card using the media slot

Content slot

Main content area for text, headings, and other informational elements, placed in the card's default slot

Action slot (optional)

Container for interactive elements like ba-link or ba-button, positioned at the bottom of the card using the action slot

Design Documentation

Cards, like other BAgel components, will stretch to fill all the horizontal space available and be as high as the content they contain. Consideration should be taken to adjust the card size to suit the content within the body of the card and its position in a page or journey

As a general rule cards should be:

1 column on small / mobile devices
2 or 3 columns on medium / tablet devices
2, 3, or 4 columns on large / desktop devices

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

It is possible to use any of the image ratios provided by the ba-image component, however it is recommended to use 1:1, 4:3, and 16:9.

Adding a heading on to cards helps users navigate the page and understand the content of the card

Cards can have up to 2 actions:

ba-link: Must be used when linking to another page
ba-button: Must only be used when submitting data in a ba-form; When there are 2 ba-buttons on a card - the first action must be primary / sale and the other must be a secondary style
ba-details: Only 1 per card; Can be used in combination with other actions but make it the last action at the bottom of the card; Other cards in the group will expand when the ba-details is open; Must be the last action when used in combination with other actions
ba-loading-skeleton: Must be used to show a loading state.

On the smallest size card and viewport:

Headings should not stretch longer than 2 lines
Body copy should be no longer than 5 to 6 lines

When grouping cards together, consider the Hermann Grid illusion. The Hermann Grid illusion is an optical illusion that occurs when viewing a grid of black squares on a white background. When you look at the grid, you see faint grey spots at the intersections of the grid lines. This is because the brain is trying to interpret the intersections as a single point, and the grey spots are the result of this interpretation.

When you group too many cards together, the brain can interpret the cards as a single entity, making it difficult to distinguish between individual cards.

Live Demo

Example heading

Example content

Action

<ba-card>
  <ba-image
    alt="Description of image"
    src="ba-card-live-demo.jpg"
    slot="media"
    aspect-ratio="16-9"
  ></ba-image>
  <ba-content>
    <h4>Example heading</h4>
    <p>Example content</p>
  </ba-content>
  <ba-link href="/link" slot="action">Action</ba-link>
</ba-card>

Properties and 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`
`theme`	`theme`	The theme of the card	`"cabin-class-business" \| "cabin-class-economy" \| "cabin-class-first" \| "cabin-class-premium-economy" \| "default" \| undefined`	`'default'`

Permitted ARIA roles

listitem
group

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‑secure‑field>`, `<ba‑input‑stepper>`, `<ba‑input‑text>`, `<ba‑input‑textarea>`, `<ba‑input‑typeahead>`, `<ba‑input‑upload>`, `<ba‑link>`, `<ba‑link‑price>`, `<ba‑loading‑skeleton>`, `<ba‑media‑object>`, `<ba‑radio‑group>`, `<ba‑select>`, `<div>`, `<fieldset>`, `<form>`
`"image"`	The slot image has been deprecated. Please use the media slot instead	`<ba‑image>`
`"media"`	Component to show at the top of the card	`<ba‑image>`, `<img>`, `<video>`
`"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>`

Parent components

ba-card can be slotted into:

Usage

Basic usage

In most scenarios a card will consist of an image, some content, and an action

A card with image, content and action

<ba-card>
  <ba-image slot="media" src="" alt=""></ba-image>
  <ba-content>
    <!-- card content -->
  </ba-content>
  <ba-link slot="action" href="/url">Action</ba-link>
</ba-card>

Adding a tag over the image

A tag can be added by using the tag-text attribute. The tag will be positioned over the image in the top left corner.

A card with a tag, image, content and action

<ba-card tag-text="Tag text">
  <ba-image slot="media" src="" alt=""></ba-image>
  <ba-content>
    <!-- card content -->
  </ba-content>
  <ba-link slot="action" href="/url">Action</ba-link>
</ba-card>

Multiple actions

Multiple actions can be added by assigning multiple components to the action slot

A card with 2 actions

<ba-card>
  <!-- card content -->
  <ba-link slot="action" href="/url">Action 1</ba-link>
  <ba-link slot="action" href="/url">Action 2</ba-link>
</ba-card>

Placing form controls in the card

Instead of putting all of the form elements (<ba-form>, <ba-input-text>, <ba-input-password>, <ba-select>, <ba-button>, etc) in the default slot of the card it is preferable to:

Wrap the ba-card in a <ba-form> element
Put inputs (<ba-input-text>, <ba-select>, etc) in the default slot
Place the <ba-button> in the action slot

This will ensure that the card layout is consistent with other cards

A card that is used as a log in form

<ba-form>
  <ba-card>
    <ba-grid row-gutter-320vw="24">
      <ba-content>
        <h2>Log in</h2>
      </ba-content>
      <ba-input-text label="Username"></ba-input-text>
      <ba-input-password label="Password"></ba-input-password>
    </ba-grid>
    <ba-button slot="action">Submit</ba-button>
  </ba-card>
</ba-form>

As a container

The card component can also be used to group custom layouts and content

A card using ba-grid to position an image to the left hand side on larger screens

<ba-card>
  <ba-grid columns-1024vw="1:2">
    <ba-image alt="" src=""></ba-image>
    <ba-content>
      <h4>Example heading</h4>
      <p>Example content</p>
    </ba-content>
  </ba-grid>
</ba-card>

With a drop shadow

The card component can also be rendered with a drop shadow to give the component some depth.

A card being rendered with a drop shadow

<ba-card drop-shadow>
  <ba-image
    alt="Description of image"
    src="ba-card-live-demo.jpg"
    slot="media"
    aspect-ratio="16-9"
  ></ba-image>
  <ba-content>
    <h4>Example heading</h4>
    <p>Example content</p>
  </ba-content>
  <ba-link href="/link" slot="action">Action</ba-link>
</ba-card>

Guidelines

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 role="listitem">...</ba-card>
  <ba-card role="listitem">...</ba-card>
  <ba-card role="listitem">...</ba-card>
  ...
</div>

State: Card without interactive elements

⇥ Tab

Focus moves to the next interactive element outside the card (cards themselves are not focusable)

State: Card with interactive elements