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
London to Sydney
Example heading
Example content
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 it's 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
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>
Further reading:
Using the group role and aria-labbeledby by helps screen reader users understand that form controls are part of the same section of a form
<form>
<ba-card-segmented role="group" aria-labelledby="label-id">
<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>
</form>
Further reading:
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
dropShadow
|
drop-shadow |
Toggles a drop shadow on the card | boolean | undefined |
false |
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‑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> |
"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> |
Permitted ARIA roles
listitemgrouparia-labelledbywhen used withgroup
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
<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
<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>
No footer
It can be used 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>