Card

Component

Storybook

Figma Demo

Guidelines

Variations

Cards are currently offered in a single combination of corner & padding relationships (default corner size of 16px with 16px padding within). As new card types are explored, other sizes may be added to the component.

Cards have a fill of white and a 1px border of neutral.

Usage

Cards should be used when the container itself has a primary destination and the content itself is a significant object within our system. Product cards or cards that link to articles or marketing content should use cards as their container.

The non-interactive container component should be used when different types of content need to be grouped together within their own section in a layout.

There are no limitations or pre-determined slots for what may go inside a generic card component.

Best Practices

• Use cards when you have a primary piece of content that benefits from a large click area.
• Do not use cards when you only need to group content in the same part of a layout; this is a better use case for the non-interactive container.

Accessibility

The role="link" is added to the component, and an href attribute is required.

Content

• Cards should have a clear title that also acts as a link to the card destination.
• Other related links within the card body may point to their own destination.
• Use CTAs thoughtfully within cards to keep preferred actions clear.

Component Specs

API

• href: string | Default: undefined
  The URL to navigate to when the card is clicked.
• testId: string | Default: undefined
  A test ID for the component, useful for testing purposes.

Example

<script>
	import { Card } from '@getprovi/craft-svelte';
</script>

<Card href="#" testId="test-card">content</Card>

Types

interface Props extends HTMLAnchorAttributes, Omit<ComponentProps<Frame>, 'role'> {
	href: HTMLAnchorAttributes['href'];
	testId?: string;
}