How to implement modern Card component (a'la Material Design 3.0) in Jetpack Compose

Question

How can I implement using Compose these modern, subtle Card components, seen in updated Google apps?

They don't have border, they are a little bit elevated, with a subtle shadow behind. I tried fiddling with modifiers on standard Card, but didn't come close to this result.

Similar versions of them (elevated Filled?) appear on Material Design 3.0 docs, but its implementation is not yet available for Compose.

Answer 1

I cannot see much differences with previous card. Maybe the border radius and the elevation are higher. In the image you posted looks like they are using a background color similar to the shadow color to reduce contrast.

Anyway here you can find the new Material Design 3 for Compose: https://developer.android.com/jetpack/androidx/releases/compose-material3

Answer 2

If you want a complete tutorial, follow this Material 3 Card article.

The Material 3 card is similar to Material 2.

Example:

Card(
    shape = RoundedCornerShape(size = 16.dp),
    border = BorderStroke(width = 2.dp, color = Color.Green)
) {
    Text(
        modifier = Modifier.padding(all = 16.dp),
        text = "SemicolonSpace",
        fontSize = 22.sp
    )
}

Output: