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} and selected={true} to apply selected-disabled styling to interactable cards.
• Make sure to also apply disabled={true} and selected={true} to any nested components, such as Text, to ensure selected-disabled styling also applies to the content.

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} and selected={true} to apply selected-disabled styling to interactable cards.
• Make sure to also apply disabled={true} and selected={true} to any nested components, such as Text, to ensure selected-disabled styling also applies to the content.

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} and selected={true} to apply selected-disabled styling to interactable cards.
• Make sure to also apply disabled={true} and selected={true} to any nested components, such as Text, to ensure selected-disabled styling also applies to the content.