Card

A styled container used to display information, images, or calls to action

Card

Healthy
Show details
Healthy
Published: February 21, 2024
Updated: February 21, 2024

Card (thumbnail)

Known issues
Show details
Known issues
Published: February 21, 2024
Updated: February 21, 2024

 

Overview

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.

Design

Structure

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.

 

Card types

  • Container: used to group various pieces of content together
  • Thumbnail: used to show a preview of a template or campaign that includes a preview image and text
Container

Container

Thumbnail

Thumbnail

 

Card container variants

Elevated

Elevated

Used when placed directly on the background of the interface

Simple

Simple

Used when inside of another container or elevated card

 

Card container states

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.

🟡 Basic Card / Type=Elevated, Size=Large, Hover=False, Edit mode=False

🟡 Basic Card / Type=Elevated, Size=Large, Hover=False, Edit mode=False

🟡 Basic Card / Type=Elevated, Size=Large, Hover=False, Edit mode=True

🟡 Basic Card / Type=Elevated, Size=Large, Hover=False, Edit mode=True

Guidelines

Use cases

  • Use the Card component to present content in a visually appealing and organized manner—like campaign previews, messaging metrics, or showcasing integration parters.

 

  • Do maintain consistency in card design across different sections of the interface to provide a cohesive user experience.
  • Do utilize whitespace effectively to ensure readability and visual hierarchy within the card.
  • Do consider responsive design principles to ensure that the card adapts well to different screen sizes and devices.
  • Don't overcrowd the card with too much information or visual elements, as it may overwhelm users and detract from the main content.
  • Don't use overly complex card designs that hinder usability or distract users from the intended purpose of the card.

 

Content

  • Include compelling and informative content within the card, such as clear headlines, descriptive text, and relevant imagery.
  • Ensure that the content is concise, engaging, and aligned with the overall messaging and goals of the interface.

Accessibility

  • Use semantic HTML elements and appropriate ARIA attributes to enhance screen reader compatibility and provide context for the Card component.
  • Ensure that interactive elements within the card, such as buttons or links, are keyboard accessible and have appropriate focus states.
  • Provide alternative text for images within the card to ensure that visually impaired users can understand the content and purpose of the images.

Health

Card

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

Healthy

 

Card (thumbnail)

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

Known issues