Meta Developers

Design

Cards

Updated: Dec 18, 2024

Image cards consist of two components: tiles and image card metadata.

Example of image cards with titles and card metadata

Figure 1: Image cards with titles and card metadata.

Usage

Cards should be easy to scan for relevant and actionable information. Place elements like text and images to clearly indicate hierarchy. Tapping the center of an image tile should always open the app or experience. Use a card when:

The information about a single unit includes multiple data types, such as images, movies, and text.
The information about a single unit contains interactive components, such as buttons and icon tags.

Anatomy

These are the different parts, characteristics, and frequently used terminologies for cards:

Figure 2: Card anatomy

1. Media

2. Text label

3. CTA (optional)

4. Price markdown (optional)

5. Metadata (optional)

6. Tag (optional)

7. Icon (optional)

Best practices

Text label consists of one line of primary text, or two lines of text (primary + secondary).
Metadata can be ratings, statuses, or facepiles depending what app information is needed.
A thumbnail can be a user profile or an image.

Optional configurations

The following image shows default, hovered, pressed, and selected card types.

Figure 3: Image cards with titles and card metadata.

Did you find this page helpful?