Card

Card is a layout element used to display information or content in an organized format.

Status

Status

Healthy

Figma component

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

Principles

Use when

  1. to present related content together in a visually cohesive manner.
  2. to provide a container for various types of content, such as text, images, or other components.

Use don’t when

  1. Displaying content that lacks a clear structure or relationship.
  2. Overloading with unnecessary content or features, causing visual clutter.

Structure

card-structure
  1. Card header
  2. Content area (body)
  3. Footer

Figma source