Blocks

Card Detail

A debit-card detail screen with a gradient card, masked balance, transfer and withdraw, and account option rows.

9:41
A

Hi, Andrew

Welcome back!

))

3487 9261 4234 7093

Card holder

Andrew River

Expiry date

09/30

Card Balance

$11000.0

Card details
Tarif information
Spending statistics

Transactions

F

FlowerShop

15:44

-$87.0
U

Uber Ride

10:15

-$25.5

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin
// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin
@Composable
fun CardDetailScreen(
    cardNumber: String,
    holder: String,
    expiry: String,
    balance: String,
) {
    Column(
        Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)
            .verticalScroll(rememberScrollState()).padding(16.dp),
    ) {
        Box(
            Modifier.fillMaxWidth().clip(RoundedCornerShape(20.dp))
                .background(Brush.linearGradient(
                    listOf(Color(0xFF3B82F6), Color(0xFF1D4ED8))))
                .padding(16.dp),
        ) {
            Column {
                Icon(Icons.Filled.AutoAwesome, null, tint = Color.White)
                Text(cardNumber, Modifier.padding(top = 24.dp), color = Color.White,
                    style = MaterialTheme.typography.titleMedium, letterSpacing = 1.sp)
                Row(Modifier.fillMaxWidth().padding(top = 12.dp),
                    horizontalArrangement = Arrangement.SpaceBetween) {
                    Column {
                        Text("Card holder", color = Color.White.copy(alpha = 0.6f),
                            style = MaterialTheme.typography.labelSmall)
                        Text(holder, color = Color.White,
                            style = MaterialTheme.typography.labelLarge)
                    }
                    Column {
                        Text("Expiry date", color = Color.White.copy(alpha = 0.6f),
                            style = MaterialTheme.typography.labelSmall)
                        Text(expiry, color = Color.White,
                            style = MaterialTheme.typography.labelLarge)
                    }
                }
            }
        }
        Text("Card Balance", Modifier.padding(top = 16.dp),
            color = MaterialTheme.colorScheme.onSurfaceVariant)
        Text(balance, style = MaterialTheme.typography.headlineMedium,
            fontWeight = FontWeight.ExtraBold)
        Row(Modifier.padding(top = 12.dp), horizontalArrangement = Arrangement.spacedBy(10.dp)) {
            OutlinedButton(onClick = {}, modifier = Modifier.weight(1f)) {
                Icon(Icons.Filled.Add, null, Modifier.size(16.dp))
                Spacer(Modifier.width(6.dp)); Text("Transfer")
            }
            OutlinedButton(onClick = {}, modifier = Modifier.weight(1f)) {
                Icon(Icons.Filled.Add, null, Modifier.size(16.dp))
                Spacer(Modifier.width(6.dp)); Text("Withdraw")
            }
        }
        ElevatedCard(Modifier.fillMaxWidth().padding(top = 12.dp)) {
            Column {
                listOf(
                    Icons.Outlined.Info to "Card details",
                    Icons.Outlined.Description to "Tarif information",
                    Icons.Outlined.BarChart to "Spending statistics",
                ).forEach { (icon, label) ->
                    ListItem(
                        leadingContent = { Icon(icon, null) },
                        headlineContent = { Text(label) },
                    )
                    HorizontalDivider()
                }
            }
        }
    }
}