Card

Card, LinkCard, and InteractableCard are visually distinct containers that group information about a single subject. Use LinkCard for navigation and InteractableCard for actions or selection.

Also known as: Tile
Salt package@salt-ds/core
Available since1.1.0
Code

Best practices

  • Give each LinkCard and InteractableCard a concise accessible name through its visible content. If the visible content doesn't provide a suitable name, use aria-label or aria-labelledby.
  • Give each InteractableCardGroup an accessible name with aria-label or aria-labelledby. Use aria-describedby to provide additional selection instructions.
  • Use InteractableCardGroup when users select one or more cards from a related set. It applies the appropriate radio or checkbox semantics and keyboard interactions.

Keyboard interactions

KeyFunction
Tab
  • Tab moves focus forward to the next LinkCard, standalone InteractableCard, or enabled card in a multi-select group.
  • A single-select group has one tab stop: the selected card, or the first enabled card when no card is selected.
Shift + Tab
  • Shift + Tab moves focus backward to the previous LinkCard, standalone InteractableCard, or enabled card in a multi-select group.
  • A single-select group has one tab stop: the selected card, or the first enabled card when no card is selected.
Space
  • Space activates a standalone InteractableCard.
  • In a single-select group, Space selects the focused card.
  • In a multi-select group, Space selects or deselects the focused card.
Enter
  • Enter activates a focused LinkCard or standalone InteractableCard.
Right arrow / Down arrow
  • In a single-select group, Right arrow or Down arrow moves focus to and selects the next enabled card. From the last card, focus and selection wrap to the first enabled card.
Left arrow / Up arrow
  • In a single-select group, Left arrow or Up arrow moves focus to and selects the previous enabled card. From the first card, focus and selection wrap to the last enabled card.