Preview Card

The preview card is a visual summary of another page or section of a page.

Preview cards display content and actions on a single topic. They should be easy to scan for relevant and actionable information.

Anatomy

  1. Title. Using typography-heading-1.
  2. Supporting text. Highlights vital information using typography-heading-5 with fill color-brand-400.
  3. Navigation. arrow-right navigates the user to the page of which the card previews.

Component Health

Component checklist

Is documented

The component is fully documented

Figma component

Includes a link to a Figma component that has been imported to Supernova

Open in Figma

Status

The component has a health status indicated

Missing

Repository

Includes a link to an external code repository

-