Card

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

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

Figma source