Card

Also known as

Tile, Panel, Teaser

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.

Cards may include text, images, or interactive elements. Make sure the content aligns with your use case, keeping it clear and easy to read. Avoid overcrowding cards with excessive content, actions, or links embedded in the text.

  • To group related information with the same visual hierarchy.
  • To present a summary of a larger idea.
  • Link cards: to link to more detailed information.
  • Interactable cards: when you need a card to act as a button or when a group of cards needs to behave like a set of checkboxes or radio buttons.
  • To display sequential information or emphasize ranking. Instead, use List.
  • As a stand-alone call to action. Instead, use Button.
  • For decoration purposes only.
  • Group cards together in a layout using similar size and content length.
  • Avoid repeating images or content in a group of cards.
  • It is recommended to use the same accent placement in a group.

A default card can contain any UI element, including actionable components such as buttons or links. You can use these, for example, to link to more detailed information.

Link cards shouldn't contain actionable components (like buttons or links), as the card itself is the interactive element.

Interactable cards serve as a toggle button, button, radio button, radio button group, checkbox or checkbox group. They allow the user to embed these elements within for visual affordance.

To import Card, InteractableCard and LinkCard from the core Salt package, use:

NameTypeDescriptionDefault
NameTypeDescriptionDefault
NameTypeDescriptionDefault
NameTypeDescriptionDefault