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.
By default, the card component does not have any interactive or focusable elements.
All card components provide primary, secondary and tertiary variants, offering flexibility and enabling differentiation based on visual hierarchy within your UI.
- The accent in a card is optional, but you can use it to indicate meaning (such as product or brand color).
- When paired with the hoverable prop, an accent can indicate a card is interactive when the user moves focus to the card. Interactable cards and link cards are always hoverable.
- Maintain consistency in accent placement across cards to ensure a coherent visual experience in your UI.
You can incorporate actions like links or buttons into a card. Don't embed actions into a link card or an interactable card, as the card itself is the interactive element.
- Use a link card when the entire card is clickable and navigates the user within the same tab or to a new tab.
- Don't use any focusable elements within link cards, only use static content such as text or icons.
- Avoid adding too much content to link cards. Users should be able to read them easily, and it shouldn't take too long for a screen reader tool to read out the content.
When using images in cards, set the image to span the card's entire width. You can do this by setting --saltCard-padding: 0
and putting padding around any content below the image.
- By default, the card components include
--salt-spacing-200
inner padding. - For very small cards with a limited hit area, customizing the padding to
--salt-spacing-100
is advisable. - When your cards are intended to occupy a significant portion of your application window,
--salt-spacing-300
is recommended. - Customize the spacing using the
--saltCard-padding
or--saltLinkCard-padding
CSS properties.
- By default, the card components accent color uses
--salt-container-primary-borderColor
or--salt-container-secondary-borderColor
depending on the variant. - When there is a need to associate a brand or product color to the accent bar, you can override
--saltCard-accent-color
or--saltLinkCard-accent-color
with the desired color.
Use an Interactable card when the entire card functions as a button, or when the entire card needs to be selectable from a group of cards.
The Interactable card component can be disabled to prevent the user from interacting with it, e.g., if the option is temporarily unavailable
Interactable cards can be used as a toggle button. This would typically be when used within a group context, facilitating single or multi selection.
- Set both
disabled={true}
andselected={true}
to apply selected-disabled styling to interactable cards. - Make sure to also apply
disabled={true}
andselected={true}
to any nested components, such as Text, to ensure selected-disabled styling also applies to the content.