Create a card as a container

The Card composable acts as a Material Design container for your UI. Cards present a single coherent piece of content, such as:

  • A product in a shopping app.
  • A news story in a news app.
  • A message in a communications app.

The focus on portraying a single piece of content distinguishes Card from other containers. For example, Scaffold provides general structure to a whole screen. Card is a smaller UI element inside a larger layout, whereas a layout component such as Column or Row provides a simpler and more generic API.

This topic shows you how to implement four types of cards:

Version compatibility

This implementation requires that your project minSDK be set to API level 21 or higher.

Dependencies

Create a basic card

Card behaves much like other containers in Compose. You declare its content by calling other composables within it. For example, consider how Card contains a call to Text in the following minimal example:

Create a filled card

The key here is the use of the colors property to change the filled color:

Results

A card is filled with the surface variant color from the material theme.
Figure 1. Example of a filled card.

Create an elevated card

The following snippet demonstrates how to implement an elevated card. Use the dedicated ElevatedCard composable.

You can use the elevation property to control the appearance of elevation and the resulting shadow.

Results

A card is elevated above the background of the app, with a shadow.
Figure 2. Example of an elevated card.

Create an outlined card

The following is an example of an outlined card. Use the dedicated OutlinedCard composable.

Results

A card is outlined with a thin black border.
Figure 3. Example of an outlined card.

Key points

See the reference for the API definition of Card. It defines several parameters that you can use to customize the appearance and behavior of the component.

Some key parameters include:

  • elevation: Adds a shadow to the component that makes it look elevated above the background.
  • colors: Uses the CardColors type to set the default color of both the container and any children.
  • enabled: If you pass false for this parameter, the card appears as disabled and does not respond to user input.
  • onClick: Ordinarily, a Card does not accept click events. As such, the primary overload you would like to note is that which defines an onClick parameter. Use this overload when you want your implementation of Card to respond to clicks from the user.

Cards don't come with inherent scroll or dismiss actions, but can integrate into composables offering these features. For example, to implement swipe to dismiss on a card, integrate it with the SwipeToDismiss composable. To integrate with scroll, use scroll modifiers such as verticalScroll. See the Scroll documentation for more information.

Parent collections

Learn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system.
Quick guide collection

Have questions or feedback

Go to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts.
Go to FAQ Leave feedback