Is documented
The component is fully documented
The Card component provides marketers with a versatile and visually appealing way to present content within the interface. This component is commonly used to display information, images, or calls to action, enhancing user engagement and interaction.
The Card component typically consists of a rectangular container with defined dimensions, containing various elements such as text, images, buttons, or icons. It may include features such as rounded corners, drop shadows, or overlays to create depth and visual interest.
In most cases, cards should use the ${spacing.cardPadding} variable (24px) for padding around the container and the ${spacing.cardGap} variable (24px) between cards.
In more compact interfaces, the padding can be reduced to 16px.
In some cases, when a card enters ‘Edit’ mode, a green outline is applied to the card to indicate that it’s actively being edited. The outline disappears once the card returns to a read-only state.
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova
Storybook
Includes a link to an external code repository
Status
The component has a health status indicated
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova
Storybook
Includes a link to an external code repository
Status
The component has a health status indicated