CreditCardView.kt

import androidx.compose.Composable
import androidx.compose.unaryPlus
import androidx.ui.core.Text
import androidx.ui.core.dp
import androidx.ui.core.sp
import androidx.ui.foundation.shape.corner.RoundedCornerShape
import androidx.ui.graphics.Color
import androidx.ui.layout.*
import androidx.ui.material.MaterialTheme
import androidx.ui.material.surface.Card
import androidx.ui.text.font.FontFamily
import androidx.ui.tooling.preview.Preview

@Composable
fun CreditCardView(name: String, number: String, expDate: String) {
    Card(
        shape = RoundedCornerShape(8.dp),
        color = Color.DarkGray,
        elevation = 6.dp
    ) {
        Padding(
            top = 24.dp,
            bottom = 24.dp,
            right = 32.dp,
            left = 32.dp
        ) {
            Column(arrangement = Arrangement.Center) {
                val typography = +MaterialTheme.typography()
                Text(
                    text = "Credit card",
                    style = typography.body1.copy(
                        color = Color.White,
                        fontFamily = FontFamily.Cursive
                    )
                )
                HeightSpacer(height = 8.dp)
                Text(
                    text = number,
                    style = typography.body1.copy(
                        color = Color.White,
                        fontSize = 20.sp,
                        fontFamily = FontFamily.Monospace
                    )
                )
                HeightSpacer(height = 12.dp)
                Row {
                    Text(
                        text = "Valid\ntill:",
                        style = typography.body2.copy(
                            fontSize = 8.sp,
                            color = Color.White
                        )
                    )
                    WidthSpacer(width = 8.dp)
                    Text(
                        text = expDate,
                        style = typography.body1.copy(color = Color.White)
                    )
                }
                HeightSpacer(height = 8.dp)
                Text(
                    text = name,
                    style = typography.body2.copy(color = Color.White)
                )
            }
        }
    }
}

@Preview
@Composable
fun CreditCardPreview() {
    MaterialTheme {
        Center {
            CreditCardView(
                name = "Marcel Pinto",
                number = "0000 0000 0000 0000",
                expDate = "03/22"
            )
        }
    }
}