spark/com.adevinta.spark.components.card/Card

Card

Spark card component.

Cards contain content and actions that relate information about a subject. They provide visual separation from the background and can be static or interactive.

Variants: Flat, Elevated, Outlined, HighlightFlat, HighlightElevated.

Functions

Elevated

@Composable

fun Elevated(modifier: Modifier = Modifier, shape: Shape = SparkTheme.shapes.medium, colors: Color = SparkTheme.colors.surface, contentPadding: PaddingValues = PaddingValues(16.dp), content: @Composable ColumnScope.() -> Unit)

Elevated card with a drop shadow. More separation from the background than Flat, less than Outlined.

@Composable

fun Elevated(onClick: () -> Unit, modifier: Modifier = Modifier, shape: Shape = SparkTheme.shapes.medium, colors: Color = SparkTheme.colors.surface, contentPadding: PaddingValues = PaddingValues(16.dp), content: @Composable ColumnScope.() -> Unit)

Clickable elevated card with a drop shadow. More separation from the background than Flat, less than Outlined.

Flat

@Composable

fun Flat(modifier: Modifier = Modifier, shape: Shape = SparkTheme.shapes.medium, colors: Color = SparkTheme.colors.surface, contentPadding: PaddingValues = PaddingValues(16.dp), content: @Composable ColumnScope.() -> Unit)

Flat card with subtle separation from the background. Less emphasis than Elevated or Outlined.

@Composable

fun Flat(onClick: () -> Unit, modifier: Modifier = Modifier, shape: Shape = SparkTheme.shapes.medium, colors: Color = SparkTheme.colors.surface, contentPadding: PaddingValues = PaddingValues(16.dp), content: @Composable ColumnScope.() -> Unit)

Clickable flat card with subtle separation from the background. Less emphasis than Elevated or Outlined.

HighlightElevated

@Composable

fun HighlightElevated(modifier: Modifier = Modifier, shape: Shape = SparkTheme.shapes.medium, colors: Color = SparkTheme.colors.main, contentPadding: PaddingValues = CardDefaults.paddingValues(true), heading: @Composable () -> Unit = { }, content: @Composable ColumnScope.() -> Unit)

Highlight elevated card: colored top banner with drop shadow for maximum emphasis.

@Composable

fun HighlightElevated(onClick: () -> Unit, modifier: Modifier = Modifier, shape: Shape = SparkTheme.shapes.medium, colors: Color = SparkTheme.colors.main, contentPadding: PaddingValues = CardDefaults.paddingValues(true), heading: @Composable () -> Unit = { }, content: @Composable ColumnScope.() -> Unit)

Clickable highlight elevated card: colored top banner with drop shadow for maximum emphasis.

HighlightFlat

@Composable

fun HighlightFlat(modifier: Modifier = Modifier, shape: Shape = SparkTheme.shapes.medium, colors: Color = SparkTheme.colors.main, contentPadding: PaddingValues = CardDefaults.paddingValues(true), heading: @Composable () -> Unit = { }, content: @Composable ColumnScope.() -> Unit)

Highlight flat card with a colored banner at the top for additional emphasis.

@Composable

fun HighlightFlat(onClick: () -> Unit, modifier: Modifier = Modifier, shape: Shape = SparkTheme.shapes.medium, colors: Color = SparkTheme.colors.main, contentPadding: PaddingValues = CardDefaults.paddingValues(true), heading: @Composable () -> Unit = { }, content: @Composable ColumnScope.() -> Unit)

Clickable highlight flat card with a colored banner at the top for additional emphasis.

Outlined

@Composable

fun Outlined(modifier: Modifier = Modifier, shape: Shape = SparkTheme.shapes.medium, colors: Color = SparkTheme.colors.surface, borderColor: Color = SparkTheme.colors.outline, contentPadding: PaddingValues = PaddingValues(16.dp), content: @Composable ColumnScope.() -> Unit)

Outlined card with a visual boundary around the container. Can provide greater emphasis than other types.

@Composable

fun Outlined(onClick: () -> Unit, modifier: Modifier = Modifier, shape: Shape = SparkTheme.shapes.medium, colors: Color = SparkTheme.colors.surface, borderColor: Color = SparkTheme.colors.outline, contentPadding: PaddingValues = PaddingValues(16.dp), content: @Composable ColumnScope.() -> Unit)

Clickable outlined card with a visual boundary around the container. Can provide greater emphasis than other types.