Compose Playground

Card

A container for pieces of content, with elevation and styling.

Properties
Preview
Card Header

Title

Some quick example text.

Generated Code
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

@Composable
fun MyCard() {
    Card(
        modifier = Modifier.size(width = 180.dp, height = 240.dp)
    ) {
        Column(Modifier.fillMaxSize()) {
            Image(
                painter = painterResource(id = R.drawable.header),
                contentDescription = null,
                modifier = Modifier
                    .height(100.dp)
                    .fillMaxWidth()
            )
            Column(Modifier.padding(16.dp)) {
                Text("Title", style = MaterialTheme.typography.titleLarge)
                Spacer(Modifier.height(8.dp))
                Text("Some quick example text.", style = MaterialTheme.typography.bodyMedium)
            }
        }
    }
}