Card

Card is a static container. It doesn't add interactive behavior or enter the tab order.

Card, LinkCard, and InteractableCard support primary, secondary, and tertiary variants. Static cards also support the ghost variant. Choose variants based on the content, layout, and visual hierarchy of your interface.

Use a ghost card to place static content over a custom background, image, or gradient without creating a strongly compartmentalized layout.

Cards support two elevations: flat and raised. Cards are raised by default.

Use a flat card for compact containers in data-dense interfaces, where users need to scan and compare information quickly with minimal visual noise.

Use a raised card when the content needs stronger prominence and separation from the surrounding interface.

Cards use the default border color for their variant when borderColor isn't set. Use the prop to apply a strong or subtle border color, or set borderColor="none" to make the border transparent.

• Use borderColor="strong" for higher-priority client experiences or when a stronger structural boundary is needed.
• Leave borderColor unset for most cards unless there is a specific reason to increase or reduce visual emphasis.
• Use borderColor="subtle" when the interface needs additional structure without increasing visual noise.
• Use borderColor="none" to create a subtle color-blocking effect behind key information or controls when the container shouldn't compete visually with surrounding content.

• Accents are optional. Use them to communicate meaning, such as a product or brand association.
• Don't use an accent alone to indicate that a card is interactive.
• 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.

Structural sections organize a card into predictable content regions. Use only the sections that your content needs.

Use CardHeader for a heading and supporting information, CardContent for the primary content, and CardFooter for actions. Include a heading element within CardHeader that follows the page's heading hierarchy.

Sections must be direct children of Card, LinkCard, or InteractableCard; don't wrap them in fragments or other components. Place other direct children, such as images, between sections when content needs to extend to the card edges.

• Use a link card when the entire card should act as a link. If it opens a new tab, make that clear in the link text.
• Don't place other focusable elements within link cards. Use only static content, such as text or icons.
• Keep link card content concise so users can read it easily, including with a screen reader.

When an image needs to extend to the card's edges, place it directly inside Card, LinkCard, or InteractableCard, alongside any structural sections. Including CardContent removes the card's root padding and applies padding to the content within that section.

You can set an image as the background of a card using background-image in CSS. Ensure there is enough contrast between the color of the text and the colors of the background image. WCAG recommends a contrast ratio of at least 4.5:1 for regular text and 3:1 for larger text.

• By default, the card components include --salt-spacing-200 inner padding.
• Use --salt-spacing-100 for compact cards. For interactive cards, make sure the resulting target remains large enough to use comfortably.
• Use --salt-spacing-300 when a card occupies a significant portion of the application window.
• Customize the spacing using the --saltCard-padding, --saltLinkCard-padding, or --saltInteractableCard-padding CSS properties.
• When structural sections are used, the card's root padding is always removed. Customize section spacing using --saltCardHeader-padding, --saltCardContent-padding, or --saltCardFooter-padding instead.

• By default, card accents use --salt-sentiment-accent-background.
• To associate a brand or product color with an accent, override --saltCard-accent-color, --saltLinkCard-accent-color, or --saltInteractableCard-accent-color.
• Set custom accents with a categorical border token, such as --salt-category-1-borderColor, instead of a hard-coded color value.

A standalone InteractableCard functions as a button. Use it within InteractableCardGroup when users need to select from a group of cards.

Set disabled on InteractableCard when the action or option is temporarily unavailable.

By default, users can select one card in an InteractableCardGroup. Set multiSelect to allow users to select more than one card.

Use defaultValue to set the initial selection, or use value with onChange to control selection. With multiSelect, pass an array of card values to defaultValue or value.

Set disabled on InteractableCardGroup to disable every card in the group.

The hoverable prop is deprecated. Static cards shouldn't use hover styling because it can imply that they are interactive. Use LinkCard or InteractableCard when the entire card is interactive.