# Card

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke?, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, transformation: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Base level Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` that offers a single slot to take any content. |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)( containerPainter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke?, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, transformation: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` that takes a container painter for drawing a background image, and offers a single slot to take any content. |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)( onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke?, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, transformation: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Base level Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` that offers a single slot to take any content. |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)( onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, containerPainter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke?, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, transformation: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` that takes a container painter for drawing a background image, and offers a single slot to take any content. |

## Functions

### Card

Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/NonClickableCard.kt+function:Card)

```
@Composable
fun Card(
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    transformation: SurfaceTransformation? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit
```

Base level Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` that offers a single slot to take any content.

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

Is used as the container for more opinionated `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` components that take specific content such as icons, images, titles, subtitles and labels.

The `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` is Rectangle-shaped with rounded corners by default.

Example of a non-clickable `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)`:

```kotlin
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text

Card { Text("Non Clickable Card") }
```

![NonClickableCardSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_NonClickableCardSample_CompositeImage.png)

For more information, see the [Cards](https://developer.android.com/training/wearables/components/cards) Wear OS Material design guide.

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the card |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = CardDefaults.shape` | Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors = CardDefaults.cardColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors` that will be used to resolve the colors used for this card. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#cardColors()`. |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? = null` | A BorderStroke object which is used for drawing outlines. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = CardDefaults.ContentPadding` | The spacing values to apply internally between the container and the content |
| `transformation: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation? = null` | Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The main slot for a content of this card |

### Card

Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/NonClickableCard.kt+function:Card)

```
@Composable
fun Card(
    containerPainter: Painter,
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardWithContainerPainterColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.CardWithContainerPainterContentPadding,
    transformation: SurfaceTransformation? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit
```

Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` that takes a container painter for drawing a background image, and offers a single slot to take any content.

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

An image background is a means to reinforce the meaning of information in a Card. Cards should have a content color that contrasts with the background image and scrim. This `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` takes `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Card(androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` for the container image background to be drawn (the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors` containerColor property is ignored). It is recommended to use `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#containerPainter(androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Brush,kotlin.Boolean,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float)` to create the painter so that a scrim is drawn on top of the container image, ensuring that any content above the background is legible.

The `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` is Rectangle-shaped with rounded corners by default.

Example of a non-clickable `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` with an image background:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.ui.res.painterResource
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.Text

Card(
    containerPainter =
        CardDefaults.containerPainter(image = painterResource(id = R.drawable.backgroundimage))
) {
    Text("Non clickable image card")
}
```

![NonClickableImageCardSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_NonClickableImageCardSample_CompositeImage.png)

| Parameters |
|---|---|
| `containerPainter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` to use to draw the container image of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)`, such as returned by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#containerPainter(androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Brush,kotlin.Boolean,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float)`. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the card |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = CardDefaults.shape` | Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors = CardDefaults.cardWithContainerPainterColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors` that will be used to resolve the colors used for this card (the containerColor is overridden by containerPainter). See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#cardWithContainerPainterColors()`. |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? = null` | A BorderStroke object which is used for drawing outlines. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = CardDefaults.CardWithContainerPainterContentPadding` | The spacing values to apply internally between the container and the content |
| `transformation: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation? = null` | Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The main slot for a content of this card |

### Card

Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/Card.kt+function:Card) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0)

```
@Composable
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit
```

Base level Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` that offers a single slot to take any content.

Is used as the container for more opinionated `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` components that take specific content such as icons, images, titles, subtitles and labels.

The `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` is Rectangle-shaped with rounded corners by default.

Cards can be enabled or disabled. A disabled card will not respond to click events.

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` with onClick:

```kotlin
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text

Card(onClick = { /* Do something */ }) { Text("Card") }
```

![CardSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_CardSample_CompositeImage.png)

Example of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` with onLongClick:

```kotlin
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text

Card(
    onClick = { /* Do something */ },
    onLongClick = onLongClickHandler,
    onLongClickLabel = "Long click",
) {
    Text("Card with long click")
}
```

`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` does not constrain the height of its contents by default. Where necessary to do that, use `Modifier.height(IntrinsicSize.Min)` as shown in this example:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.Text

Card(
    onClick = { /* Do something */ },
    // Constrains the card to fill background up to the intrinsic height.
    modifier = Modifier.height(IntrinsicSize.Min),
) {
    Text(
        "Filled Content",
        color = MaterialTheme.colorScheme.onPrimary,
        modifier =
            Modifier.fillMaxHeight()
                .clip(RoundedCornerShape(8.dp))
                .background(MaterialTheme.colorScheme.primary)
                .wrapContentSize(Alignment.Center),
    )
}
```

![CardFillContentSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_CardFillContentSample_CompositeImage.png)

For more information, see the [Cards](https://developer.android.com/training/wearables/components/cards) Wear OS Material design guide.

| Parameters |
|---|---|
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Will be called when the user clicks the card |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the card |
| `onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | Called when this card is long clicked (long-pressed). When this callback is set, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` should be set as well. |
| `onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | Semantic / accessibility label for the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` action. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls the enabled state of the card. When false, this card will not be clickable and there will be no ripple effect on click. Wear cards do not have any specific elevation or alpha differences when not enabled - they are simply not clickable. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = CardDefaults.shape` | Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors = CardDefaults.cardColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors` that will be used to resolve the colors used for this card in different states. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#cardColors()`. |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? = null` | A BorderStroke object which is used for drawing outlines. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = CardDefaults.ContentPadding` | The spacing values to apply internally between the container and the content |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this card. You can use this to change the card's appearance or preview the card in different states. Note that if `null` is provided, interactions will still happen internally. |
| `transformation: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation? = null` | Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The main slot for a content of this card |

### Card

Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/Card.kt+function:Card) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0)

```
@Composable
fun Card(
    onClick: () -> Unit,
    containerPainter: Painter,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardWithContainerPainterColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.CardWithContainerPainterContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit
```

Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` that takes a container painter for drawing a background image, and offers a single slot to take any content.

An image background is a means to reinforce the meaning of information in a Card. Cards should have a content color that contrasts with the background image and scrim. This `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` takes `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Card(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` for the container image background to be drawn (the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors` containerColor property is ignored). It is recommended to use `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#containerPainter(androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Brush,kotlin.Boolean,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float)` to create the painter so that a scrim is drawn on top of the container image, ensuring that any content above the background is legible.

The `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` is Rectangle-shaped with rounded corners by default.

Cards can be enabled or disabled. A disabled card will not respond to click events.

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` with an image background:

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.ui.res.painterResource
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.Text

Card(
    onClick = { /* Do something */ },
    containerPainter =
        CardDefaults.containerPainter(image = painterResource(id = R.drawable.backgroundimage)),
) {
    Text("Image card")
}
```

![ImageCardSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_ImageCardSample_CompositeImage.png)

| Parameters |
|---|---|
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Will be called when the user clicks the card |
| `containerPainter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter` to use to draw the container image of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)`, such as returned by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#containerPainter(androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Brush,kotlin.Boolean,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float)`. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the card |
| `onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | Called when this card is long clicked (long-pressed). When this callback is set, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Card(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` should be set as well. |
| `onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | Semantic / accessibility label for the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#Card(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` action. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls the enabled state of the card. When false, this card will not be clickable and there will be no ripple effect on click. Wear cards do not have any specific elevation or alpha differences when not enabled - they are simply not clickable. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = CardDefaults.shape` | Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors = CardDefaults.cardWithContainerPainterColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors` that will be used to resolve the colors used for this card in different states (the containerColor is overridden by containerPainter). See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#cardWithContainerPainterColors()`. |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? = null` | A BorderStroke object which is used for drawing outlines. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = CardDefaults.CardWithContainerPainterContentPadding` | The spacing values to apply internally between the container and the content |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this card. You can use this to change the card's appearance or preview the card in different states. Note that if `null` is provided, interactions will still happen internally. |
| `transformation: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation? = null` | Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The main slot for a content of this card |