Cards in Jetpack Compose Glimmer

Applicable XR devices
This guidance helps you build experiences for these types of XR devices.
Learn about XR device types →
Display Glasses
Learn about XR device types →

In Jetpack Compose Glimmer, the Card component serves as the primary container for related content, creating a clear visual boundary for digestible units of information. Cards are highly adaptable, supporting combinations of main content, optional titles, subtitles, and leading or trailing icons. Cards fill the maximum available width by default, are focusable, and you can also make them clickable. Cards support a vertical arrangement where the header image is top-most, followed by the title, subtitle, and body content.

Cards are built on the Jetpack Compose Glimmer surface system, so they inherit physical properties like depth effects, clipping, and consistent border highlights.

Figure 1. An example of some different styles of cards in Jetpack Compose Glimmer.

Anatomy and slots

A Jetpack Compose Glimmer Card is built from several specialized elements that let you customize its content and layout.

Slot Description

Header

The top section of the card, designed to hold an image.

Title and subtitle

These text fields provide the main and secondary labels for the card. The title is placed above the subtitle.

Leading icon

An optional icon (typically an Icon) that appears at the beginning of the card's content area.

Trailing icon

An optional icon that appears at the end of the card's content area.

Main content

The core body of the card for primary Text or content.

Card defaults

The following defaults apply to cards:

Example: Complex card with multiple slots

The following code shows how to use multiple slots together to build a card.

Card { Text("This is a card") }

Key points about the code

  • Shows how to use various card elements, such as title, subtitle, and leadingIcon, to customize the card's content and structure.
  • Uses the Card overload with onClick to make the entire card surface interactive.