Card
Card
Card
, LinkCard
and InteractableCard
are visually distinct content containers that display a snapshot of information about a single subject and act as an entry point for more detailed information.
In adherence to accessibility standards, the boundaries of a user interface component are only subjective to the 3:1 contrast minimum if they serve to identify the components purpose.
Salt card components incorporate subtle borders as part of their design. To ensure these cards meet accessibility criteria, itβs imperative to check that any content (i.e., text or icon) used within them maintain a minimum contrast ratio of 4:5:1 against the card background. This can be achieved by using the --salt-content-*
tokens.
For optimal accessibility when using multiple cards together:
- Use cards of uniform size.
- Use a repetitive arrangement pattern.
- Maintain consistent spacing between the cards.
- Use
InteractableCardGroup
to ensure users can navigate between interactable cards using keyboard controls, similar to interacting with checkboxes and radio buttons.
Salt provides layout components that can help achieve this.
Key | Function |
---|---|
Tab |
|
Shift + Tab |
|
Space |
|
Enter |
|
Up arrow / Down arrow / Left arrow / Right arrow |
|