Component

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

Airframe

Active

Figma

Web Components

Active

Storybook

Github

React

Planned

React Native

Planned

Design

Code

Accessibility

Anatomy

Header slot (optional but recommended)

Contextual information or title at the top of the card

Content area

Main content area containing text, and other components

Footer slot (optional)

For actions such as links, buttons, or details components

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

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 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

Live Demo

London to Sydney

Example heading

Example content

Action

<ba-card-segmented>
  <ba-content slot="header">
    <p>London to Sydney</p>
  </ba-content>
  <ba-content>
    <h4>Example heading</h4>
    <p>Example content</p>
  </ba-content>
  <ba-link href="/link" slot="footer">Action</ba-link>
</ba-card-segmented>

Properties and attributes

Property	Attribute	Description	Type	Default
`dropShadow`	`drop-shadow`	Toggles a drop shadow on the card	`boolean \| undefined`	`false`

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‑details>`, `<ba‑flight‑line>`, `<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‑message>`, `<ba‑radio‑group>`, `<ba‑select>`, `<fieldset>`, `<form>`
`"header"`	Elements to be shown in the cards header	`<ba‑content>`, `<ba‑flex>`, `<ba‑grid>`
`"footer"`	Elements to be shown in the cards footer	`<ba‑button>`, `<ba‑content>`, `<ba‑details>`, `<ba‑download>`, `<ba‑flex>`, `<ba‑grid>`, `<ba‑inline‑list>`, `<ba‑link>`

Parent components

ba-card-segmented can be slotted into:

Usage

Basic usage

In most scenarios a segmented card will consist of a header, some content, and a footer

A card with header, content and footer

<ba-card-segmented>
  <ba-content slot="header">
    <p>London to Sydney</p>
  </ba-content>
  <ba-content>
    <h4>Example heading</h4>
    <p>Example content</p>
  </ba-content>
  <ba-link href="/link" slot="footer">Action</ba-link>
</ba-card-segmented>

No header

It can be used with no header

A card with no header

<ba-card-segmented>
  <ba-content>
    <h4>Example heading</h4>
    <p>Example content</p>
  </ba-content>
  <ba-link href="/link" slot="footer">Action</ba-link>
</ba-card-segmented>

It can be used with no footer

A card with no footer

<ba-card-segmented>
  <ba-content slot="header">
    <p>London to Sydney</p>
  </ba-content>
  <ba-content>
    <h4>Example heading</h4>
    <p>Example content</p>
  </ba-content>
</ba-card-segmented>

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