Cards are surfaces that display content and actions on a single topic. Lumo UI provides three card variants: standard Card, ElevatedCard, and OutlinedCard.
Basic Card
modifier
Modifier
default:"Modifier"
Modifier to be applied to the card
shape
Shape
default:"CardDefaults.Shape"
Shape of the card. Defaults to rounded corners with 12dp radius
colors
CardColors
default:"CardDefaults.cardColors()"
Colors to be used for the card’s container and content
elevation
CardElevation
default:"CardDefaults.cardElevation()"
Elevation values for different interaction states
border
BorderStroke?
default:"null"
Optional border to draw on the card
content
@Composable ColumnScope.() -> Unit
required
Content to be displayed inside the card
Clickable Card
For interactive cards that respond to clicks:
Callback invoked when the card is clicked
Controls the enabled state of the card
interactionSource
MutableInteractionSource
default:"MutableInteractionSource()"
Source of interactions for the card
Usage Examples
Default Card
Card(
modifier = Modifier
.fillMaxWidth()
.height(120.dp)
) {
// Card content
}
Elevated Card with Click Handler
ElevatedCard(
modifier = Modifier
.fillMaxWidth()
.height(120.dp),
onClick = { /* Handle click */ }
) {
// Card content
}
Outlined Card
OutlinedCard(
modifier = Modifier
.fillMaxWidth()
.height(120.dp)
) {
// Card content
}
Custom Colored Card
Card(
modifier = Modifier
.fillMaxWidth()
.height(120.dp),
colors = CardDefaults.cardColors(
containerColor = Color(0xFFECEFF1),
contentColor = Color(0xFF607D8B)
)
) {
// Card content
}
Disabled Card
Card(
modifier = Modifier
.fillMaxWidth()
.height(120.dp),
onClick = { },
enabled = false,
colors = CardDefaults.cardColors(
containerColor = Color(0xFFBDBDBD),
contentColor = Color(0xFF9E9E9E),
disabledContainerColor = Color(0xFFEEEEEE),
disabledContentColor = Color(0xFFBDBDBD)
)
) {
// Card content
}
Card Variants
ElevatedCard
A card with elevated appearance and shadow.
modifier
Modifier
default:"Modifier"
Modifier to be applied to the card
shape
Shape
default:"CardDefaults.ElevatedShape"
Shape of the elevated card
colors
CardColors
default:"CardDefaults.elevatedCardColors()"
Colors for the elevated card
elevation
CardElevation
default:"CardDefaults.elevatedCardElevation()"
Elevation with default of 2dp, and 4dp for pressed/focused/hovered states
OutlinedCard
A card with a border and no elevation.
modifier
Modifier
default:"Modifier"
Modifier to be applied to the card
shape
Shape
default:"CardDefaults.OutlinedShape"
Shape of the outlined card
colors
CardColors
default:"CardDefaults.outlinedCardColors()"
Colors for the outlined card
elevation
CardElevation
default:"CardDefaults.outlinedCardElevation()"
Elevation with 0dp default and 1dp hover elevation
border
BorderStroke
default:"CardDefaults.outlinedCardBorder()"
Border stroke with 1dp width using theme outline color
Styling Options
Card Colors
Customize card colors using CardDefaults.cardColors():
CardDefaults.cardColors(
containerColor: Color = AppTheme.colors.surface,
contentColor: Color = AppTheme.colors.onSurface,
disabledContainerColor: Color = AppTheme.colors.disabled,
disabledContentColor: Color = AppTheme.colors.onDisabled
)
Card Elevation
Customize elevation for different interaction states:
CardDefaults.cardElevation(
defaultElevation: Dp = 0.0.dp,
pressedElevation: Dp = 0.0.dp,
focusedElevation: Dp = 0.0.dp,
hoveredElevation: Dp = 1.0.dp,
draggedElevation: Dp = 3.0.dp,
disabledElevation: Dp = 0.0.dp
)
Source Reference
Card component implementation: components-lab/src/commonMain/kotlin/com/nomanr/lumo/ui/components/card/Card.kt