Material 3 Cards in Jetpack Compose

Get started with Material 3 cards in Jetpack Compose to create user-friendly interfaces for displaying a single piece of content.

Explore Card Styles

Learn to implement three Material 3 card types for presenting content.

Filled Card

Shows content with a filled background.

@Composable
fun FilledCardExample() {
    // Creates a card with a filled background
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant // Sets the background color
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp) // *Required: Sets card size
    ) {
        Text(
            text = "Filled", // *Required: Defines card content
            modifier = Modifier
                .padding(16.dp), // Adds padding to content
            textAlign = TextAlign.Center // Centers the text
        )
    }
}
  

Use a Filled Card when you want to show content with a filled background.

Examples:

• Show a product in a shopping app
• Display a news story in a news app
• Present a message in a chat app

---

Elevated Card

Shows content with a shadow effect.

@Composable
fun ElevatedCardExample() {
    // Creates a card with a shadow effect
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp // Sets shadow elevation
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp) // *Required: Sets card size
    ) {
        Text(
            text = "Elevated", // *Required: Defines card content
            modifier = Modifier
                .padding(16.dp), // Adds padding to content
            textAlign = TextAlign.Center // Centers the text
        )
    }
}
  

Use an Elevated Card when you want to show content with a shadow effect.

Examples:

• Show a featured item in an e-commerce app
• Display a highlighted post in a social media app
• Present a profile card in a user directory

---

Outlined Card

Shows content with a border outline.

@Composable
fun OutlinedCardExample() {
    // Creates a card with a border outline
    OutlinedCard(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface // Sets the background color
        ),
        border = BorderStroke(1.dp, Color.Black), // Sets the border style
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp) // *Required: Sets card size
    ) {
        Text(
            text = "Outlined", // *Required: Defines card content
            modifier = Modifier
                .padding(16.dp), // Adds padding to content
            textAlign = TextAlign.Center // Centers the text
        )
    }
}
  

Use an Outlined Card when you want to show content with a border outline.

Examples:

• Show a task item in a to-do app
• Display an article summary in a news app
• Present a contact card in a messaging app

---

Card Properties

Understand the key properties used in the card examples.

Property	Usage
content*	Required: Defines the card’s content, like Text
modifier*	Required: Customizes layout, like size (e.g., 240.dp width, 100.dp height)
colors	Sets the card’s background color using CardDefaults.cardColors
elevation	Sets the shadow elevation for an ElevatedCard (e.g., 6.dp)
border	Sets the border style for an OutlinedCard (e.g., 1.dp black border)