Import
Jetpack Compose framework
Import the Card composable function in your Compose file.
import com.backbase.android.design.component.Card
Usage
Basic usage
Create a Card composable with content using Composable lambda syntax.
// Basic card with content
Card {
Text("Card Content")
}
Advanced usage
// Card with complex content
Card {
Column(
modifier = Modifier.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
Text(
text = "Card Title",
style = MaterialTheme.typography.h6
)
Text(
text = "This is the card content with multiple lines of text.",
style = MaterialTheme.typography.body2
)
Button(onClick = { /* Handle action */ }) {
Text("Action")
}
}
}
Configuration
Non-clickable Card
|
Parameter |
Type |
Default |
|---|---|---|
|
content |
@Composable () -> Unit |
Required |
|
modifier |
Modifier |
Modifier |
Clickable Card
|
Parameter |
Type |
Default |
|---|---|---|
|
content |
@Composable () -> Unit |
Required |
|
modifier |
Modifier |
Modifier |
|
onClick |
() -> Unit |
Required |
content
The content parameter defines the composable content to be displayed inside the card.
// Card with custom content
Card {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
Icon(Icons.Default.Star, contentDescription = null)
Text("Featured Content")
}
}
modifier
The modifier parameter allows customization of the card's layout and appearance.
// Card with custom modifier
Card(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Text("Full-width card with padding")
}
onClick
The onClick parameter makes the card clickable and defines the action to perform when tapped.
// Clickable card
Card(
onClick = {
// Handle card click
navigateToDetails()
}
) {
Text("Tap this card")
}
Styling
Automatic styling
The Card automatically applies design tokens through CardColorScheme and CardLayout classes for consistent appearance.
// Card with automatic token-based styling
Card {
Text("Styled content")
}
// Automatically applies:
// - Background color from CardColorScheme.backgroundColor
// - Content color from CardColorScheme.contentColor
// - Shape from CardLayout.shape
// - Elevation from CardLayout.elevation
// - Content padding from CardLayout.contentPadding
Content layout
The Card provides automatic content padding through the CardLayout.contentPadding property.
// Card handles content layout automatically
Card {
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
Text("Title")
Text("Description")
Text("Additional details")
}
// Content is automatically padded based on CardLayout tokens
}
States
Clickable vs non-clickable
The Card supports both clickable and non-clickable variants depending on the parameters provided.
// Non-clickable card
Card {
Text("Static content")
}
// Clickable card
Card(
onClick = { handleClick() }
) {
Text("Interactive content")
}
Layout
Flexible sizing
The Card adapts to its content size while applying proper padding and styling from design tokens.
// Card adapts to content
Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
Card {
Text("Small content")
}
Card {
Column {
Text("Larger content")
Text("with multiple lines")
Text("and more information")
}
}
}
Integration with other composables
// Card in complex layouts
LazyColumn(
verticalArrangement = Arrangement.spacedBy(12.dp),
contentPadding = PaddingValues(16.dp)
) {
items(itemsList) { item ->
Card(
onClick = { navigateToItem(item.id) }
) {
ItemComposable(item = item)
}
}
}
Accessibility
Best practices
- Card automatically provides appropriate accessibility behavior through Compose
- Content within the card maintains individual accessibility properties
- Clickable cards automatically receive appropriate accessibility traits
// Card with accessibility considerations
Card(
onClick = { /* action */ },
modifier = Modifier.semantics {
contentDescription = "Product card for ${product.name}"
role = Role.Button
}
) {
Column {
Text(
text = product.name,
modifier = Modifier.semantics { heading() }
)
Text(product.description)
}
}
Design tokens
Component styling is applied automatically through the design system's theming infrastructure using CardColorScheme and CardLayout classes.
Token integration:
- Colors: CardColorScheme class manages backgroundColor and contentColor
- Layout: CardLayout class manages contentPadding, elevation, and shape
- Material integration: Uses Material Card component with design system theming
- Elevation: Automatic shadow and elevation through Material Card implementation