ba-card

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

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

Icons should be a replacement for the image, they should not be used together.

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.

Further reading:

• https://uxmovement.com/content/how-the-hermann-grid-illusion-affects-what-users-see/

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:

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role
• https://inclusive-components.design/cards/

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. Make sure that aria-labbeledby uses the id of the text that describes the cards form elements.

<ba-form>
  <ba-card role="group" aria-labelledby="label-id">
    <ba-content>
      <p id="label-id">Label</p>
    </ba-content>
    <!-- Form controls -->
    <ba-button slot="action">Submit</ba-button>
  </ba-card>
</ba-form>

Further reading:

• https://www.w3.org/TR/WCAG20-TECHS/ARIA17.html