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.

Action

A slot for a primary interactive element, such as a Button.

Main content

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

Card defaults

The following defaults apply to cards:

Example: Basic card

The following code creates a basic card:

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}

Example: Complex card with multiple slots

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

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}

Key points about the code

  • Shows how to utilize various card elements, such as header, title, leadingIcon, and action, to customize the card's content and structure.
  • Uses the standard Card overload with an action because only the card (or its internal action) needs to be focusable. If you need to make the entire card surface interactive, use the Card overload with onClick instead.
  • This card uses an action slot, so the card surface isn't focusable, and focus is directed to the action button instead.