{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

CardKt

public final class CardKt


Summary

Public methods

static final void
@Composable
Card(
    @NonNull Modifier modifier,
    @NonNull Shape shape,
    @NonNull CardColors colors,
    @NonNull CardElevation elevation,
    BorderStroke border,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design filled card.

static final void
@Composable
Card(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull CardColors colors,
    @NonNull CardElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design filled card.

static final void
@Composable
ElevatedCard(
    @NonNull Modifier modifier,
    @NonNull Shape shape,
    @NonNull CardColors colors,
    @NonNull CardElevation elevation,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design elevated card.

static final void
@Composable
ElevatedCard(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull CardColors colors,
    @NonNull CardElevation elevation,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design elevated card.

static final void
@Composable
OutlinedCard(
    @NonNull Modifier modifier,
    @NonNull Shape shape,
    @NonNull CardColors colors,
    @NonNull CardElevation elevation,
    @NonNull BorderStroke border,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design outlined card.

static final void
@Composable
OutlinedCard(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull CardColors colors,
    @NonNull CardElevation elevation,
    @NonNull BorderStroke border,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design outlined card.

Public methods

Card

@Composable
public static final void Card(
    @NonNull Modifier modifier,
    @NonNull Shape shape,
    @NonNull CardColors colors,
    @NonNull CardElevation elevation,
    BorderStroke border,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design filled card.

Cards contain contain content and actions that relate information about a subject. Filled cards provide subtle separation from the background. This has less emphasis than elevated or outlined cards.

This Card does not handle input events - see the other Card overloads if you want a clickable or selectable Card.

Filled card image

Card sample:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Card(Modifier.size(width = 180.dp, height = 100.dp)) {
    Box(Modifier.fillMaxSize()) {
        Text("Card content", Modifier.align(Alignment.Center))
    }
}
Parameters
@NonNull Modifier modifier

the Modifier to be applied to this card

@NonNull Shape shape

defines the shape of this card's container, border (when border is not null), and shadow (when using elevation)

@NonNull CardColors colors

CardColors that will be used to resolve the colors used for this card in different states. See CardDefaults.cardColors.

@NonNull CardElevation elevation

CardElevation used to resolve the elevation for this card in different states. This controls the size of the shadow below the card. Additionally, when the container color is ColorScheme.surface, this controls the amount of primary color applied as an overlay. See also: Surface.

BorderStroke border

the border to draw around the container of this card

Card

@Composable
public static final void Card(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull CardColors colors,
    @NonNull CardElevation elevation,
    BorderStroke border,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design filled card.

Cards contain contain content and actions that relate information about a subject. Filled cards provide subtle separation from the background. This has less emphasis than elevated or outlined cards.

This Card handles click events, calling its onClick lambda.

Filled card image

Clickable card sample:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Card(
    onClick = { /* Do something */ },
    modifier = Modifier.size(width = 180.dp, height = 100.dp)
) {
    Box(Modifier.fillMaxSize()) {
        Text("Clickable", Modifier.align(Alignment.Center))
    }
}
Parameters
@NonNull Function0<Unit> onClick

called when this card is clicked

@NonNull Modifier modifier

the Modifier to be applied to this card

boolean enabled

controls the enabled state of this card. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull Shape shape

defines the shape of this card's container, border (when border is not null), and shadow (when using elevation)

@NonNull CardColors colors

CardColors that will be used to resolve the color(s) used for this card in different states. See CardDefaults.cardColors.

@NonNull CardElevation elevation

CardElevation used to resolve the elevation for this card in different states. This controls the size of the shadow below the card. Additionally, when the container color is ColorScheme.surface, this controls the amount of primary color applied as an overlay. See also: Surface.

BorderStroke border

the border to draw around the container of this card

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this card. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this card in different states.

ElevatedCard

@Composable
public static final void ElevatedCard(
    @NonNull Modifier modifier,
    @NonNull Shape shape,
    @NonNull CardColors colors,
    @NonNull CardElevation elevation,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design elevated card.

Elevated cards contain content and actions that relate information about a subject. They have a drop shadow, providing more separation from the background than filled cards, but less than outlined cards.

This ElevatedCard does not handle input events - see the other ElevatedCard overloads if you want a clickable or selectable ElevatedCard.

Elevated card image

Elevated card sample:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Card
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

ElevatedCard(Modifier.size(width = 180.dp, height = 100.dp)) {
    Box(Modifier.fillMaxSize()) {
        Text("Card content", Modifier.align(Alignment.Center))
    }
}
Parameters
@NonNull Modifier modifier

the Modifier to be applied to this card

@NonNull Shape shape

defines the shape of this card's container and shadow (when using elevation)

@NonNull CardColors colors

CardColors that will be used to resolve the color(s) used for this card in different states. See CardDefaults.elevatedCardElevation.

@NonNull CardElevation elevation

CardElevation used to resolve the elevation for this card in different states. This controls the size of the shadow below the card. Additionally, when the container color is ColorScheme.surface, this controls the amount of primary color applied as an overlay. See also: Surface.

ElevatedCard

@Composable
public static final void ElevatedCard(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull CardColors colors,
    @NonNull CardElevation elevation,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design elevated card.

Elevated cards contain content and actions that relate information about a subject. They have a drop shadow, providing more separation from the background than filled cards, but less than outlined cards.

This ElevatedCard handles click events, calling its onClick lambda.

Elevated card image

Clickable elevated card sample:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Card
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

ElevatedCard(
    onClick = { /* Do something */ },
    modifier = Modifier.size(width = 180.dp, height = 100.dp)
) {
    Box(Modifier.fillMaxSize()) {
        Text("Clickable", Modifier.align(Alignment.Center))
    }
}
Parameters
@NonNull Function0<Unit> onClick

called when this card is clicked

@NonNull Modifier modifier

the Modifier to be applied to this card

boolean enabled

controls the enabled state of this card. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull Shape shape

defines the shape of this card's container and shadow (when using elevation)

@NonNull CardColors colors

CardColors that will be used to resolve the color(s) used for this card in different states. See CardDefaults.elevatedCardElevation.

@NonNull CardElevation elevation

CardElevation used to resolve the elevation for this card in different states. This controls the size of the shadow below the card. Additionally, when the container color is ColorScheme.surface, this controls the amount of primary color applied as an overlay. See also: Surface.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this card. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this card in different states.

OutlinedCard

@Composable
public static final void OutlinedCard(
    @NonNull Modifier modifier,
    @NonNull Shape shape,
    @NonNull CardColors colors,
    @NonNull CardElevation elevation,
    @NonNull BorderStroke border,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design outlined card.

Outlined cards contain content and actions that relate information about a subject. They have a visual boundary around the container. This can provide greater emphasis than the other types.

This OutlinedCard does not handle input events - see the other OutlinedCard overloads if you want a clickable or selectable OutlinedCard.

Outlined card image

Outlined card sample:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Card
import androidx.compose.material3.OutlinedCard
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

OutlinedCard(Modifier.size(width = 180.dp, height = 100.dp)) {
    Box(Modifier.fillMaxSize()) {
        Text("Card content", Modifier.align(Alignment.Center))
    }
}
Parameters
@NonNull Modifier modifier

the Modifier to be applied to this card

@NonNull Shape shape

defines the shape of this card's container, border (when border is not null), and shadow (when using elevation)

@NonNull CardColors colors

CardColors that will be used to resolve the color(s) used for this card in different states. See CardDefaults.outlinedCardColors.

@NonNull CardElevation elevation

CardElevation used to resolve the elevation for this card in different states. This controls the size of the shadow below the card. Additionally, when the container color is ColorScheme.surface, this controls the amount of primary color applied as an overlay. See also: Surface.

@NonNull BorderStroke border

the border to draw around the container of this card

OutlinedCard

@Composable
public static final void OutlinedCard(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull CardColors colors,
    @NonNull CardElevation elevation,
    @NonNull BorderStroke border,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design outlined card.

Outlined cards contain content and actions that relate information about a subject. They have a visual boundary around the container. This can provide greater emphasis than the other types.

This OutlinedCard handles click events, calling its onClick lambda.

Outlined card image

Clickable outlined card sample:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Card
import androidx.compose.material3.OutlinedCard
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

OutlinedCard(
    onClick = { /* Do something */ },
    modifier = Modifier.size(width = 180.dp, height = 100.dp)
) {
    Box(Modifier.fillMaxSize()) {
        Text("Clickable", Modifier.align(Alignment.Center))
    }
}
Parameters
@NonNull Function0<Unit> onClick

called when this card is clicked

@NonNull Modifier modifier

the Modifier to be applied to this card

boolean enabled

controls the enabled state of this card. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull Shape shape

defines the shape of this card's container, border (when border is not null), and shadow (when using elevation)

@NonNull CardColors colors

CardColors that will be used to resolve the color(s) used for this card in different states. See CardDefaults.outlinedCardColors.

@NonNull CardElevation elevation

CardElevation used to resolve the elevation for this card in different states. This controls the size of the shadow below the card. Additionally, when the container color is ColorScheme.surface, this controls the amount of primary color applied as an overlay. See also: Surface.

@NonNull BorderStroke border

the border to draw around the container of this card

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this card. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this card in different states.