# TitleCard

## 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/TitleCard.composable#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)( title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, subtitle: (@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)?, 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://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? )` Opinionated 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 specific layout to show interactive information about an application, e.g. a message. |
| `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/TitleCard.composable#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)( containerPainter: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/painter/Painter, title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, subtitle: (@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)?, 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://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? )` This `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TitleCard.composable#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` overload supports an image container background and provides an opinionated 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)` with a specific layout to show interactive information about an application, similar to `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TitleCard.composable#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)`. |
| `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/TitleCard.composable#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)( onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> 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?, time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, subtitle: (@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)?, 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://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? )` Opinionated 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 specific layout to show interactive information about an application, e.g. a message. |
| `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/TitleCard.composable#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)( 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, title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> 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?, time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, subtitle: (@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)?, 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://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? )` This `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TitleCard.composable#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` overload supports an image container background and provides an opinionated 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)` with a specific layout to show interactive information about an application, similar to `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TitleCard.composable#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)`. |

## Functions

### TitleCard

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:TitleCard)

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

Opinionated 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 specific layout to show interactive information about an application, e.g. a message. TitleCards are designed for use within an application.

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

The `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` fields are optional, but it is expected that at least one of these is provided. The layout will vary according to which fields are supplied - see samples.

If the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` is text it can be single or multiple line and is expected to be Top and Start aligned. When `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` is used `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` shouldn't exceed 2 lines height. Overall the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` text should be no more than 5 rows of text combined.

If more than one composable is provided in the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` slot it is the responsibility of the caller to determine how to layout the contents, e.g. provide either a row or a column.

Example of a non-clickable `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TitleCard.composable#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` with `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)`:

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

TitleCard(title = { Text("Title card") }, time = { Text("Now") }) {
    Text("Non clickable Card content")
}
```

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

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

| Parameters |
|---|---|
| `title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for displaying the title of the card, expected to be one or two lines of text. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the card |
| `time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | An optional slot for displaying the time relevant to the contents of the card, expected to be a short piece of text. Depending on whether we have a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` or not, can be placed at the end of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` line or above it. |
| `subtitle: (@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)? = null` | An optional slot for displaying the subtitle of the card, expected to be one line of text. |
| `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://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | The optional body content of the card. If not provided then title and subtitle are expected to be provided |

### TitleCard

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:TitleCard)

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

This `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TitleCard.composable#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` overload supports an image container background and provides an opinionated 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)` with a specific layout to show interactive information about an application, similar to `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TitleCard.composable#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)`.

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

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/TitleCard.composable#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` takes `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` 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/package-summary#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` fields are optional, but it is expected that at least one of these is provided. The layout will vary according to which fields are supplied - see samples.

If the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` is text it can be single or multiple line and is expected to be Top and Start aligned. When `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` is used `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` shouldn't exceed 2 lines height. Overall the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` text should be no more than 5 rows of text combined.

If more than one composable is provided in the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` slot it is the responsibility of the caller to determine how to layout the contents, e.g. provide either a row or a column.

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 a background image:

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

TitleCard(
    containerPainter =
        CardDefaults.containerPainter(image = painterResource(id = R.drawable.backgroundimage)),
    title = { Text("Card title") },
    subtitle = { Text("Subtitle") },
    time = { Text("Now") },
    contentPadding = CardDefaults.CardWithContainerPainterContentPadding,
    modifier = Modifier.semantics { contentDescription = "Background image" },
) {
    Text("Card content")
}
```

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

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

| 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/TitleCard.composable#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)`, 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)`. |
| `title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for displaying the title of the card, expected to be one or two lines of text. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the card |
| `time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | An optional slot for displaying the time relevant to the contents of the card, expected to be a short piece of text. Depending on whether we have a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` or not, can be placed at the end of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,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.Function0)` line or above it. |
| `subtitle: (@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)? = null` | An optional slot for displaying the subtitle of the card, expected to be one line of text. |
| `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://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | The optional body content of the card. If not provided then title and subtitle are expected to be provided |

### TitleCard

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:TitleCard) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0)

```
@Composable
fun TitleCard(
    onClick: () -> Unit,
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    time: (@Composable () -> Unit)? = null,
    subtitle: (@Composable ColumnScope.() -> Unit)? = 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 () -> Unit)? = null
): Unit
```

Opinionated 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 specific layout to show interactive information about an application, e.g. a message. TitleCards are designed for use within an application.

The `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` fields are optional, but it is expected that at least one of these is provided. The layout will vary according to which fields are supplied - see samples.

If the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` is text it can be single or multiple line and is expected to be Top and Start aligned. When `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` is used `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` shouldn't exceed 2 lines height. Overall the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` text should be no more than 5 rows of text combined.

If more than one composable is provided in the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` slot it is the responsibility of the caller to determine how to layout the contents, e.g. provide either a row or a column.

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TitleCard.composable#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` with `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)`:

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

TitleCard(
    onClick = { /* Do something */ },
    title = { Text("Title card") },
    time = { Text("Now") },
) {
    Text("Card content")
}
```

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

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TitleCard.composable#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` with `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)`:

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

TitleCard(
    onClick = { /* Do something */ },
    time = { Text("Now") },
    title = { Text("Title card") },
    subtitle = { Text("Subtitle") },
)
```

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

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TitleCard.composable#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` with images `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)`:

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
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.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TitleCard

TitleCard(
    onClick = { /* Do something */ },
    title = { Text("Title card") },
    time = { Text("Now") },
    modifier = Modifier.semantics { contentDescription = "Background image" },
) {
    Spacer(Modifier.height(4.dp))
    Row(modifier = Modifier.fillMaxWidth()) {
        Image(
            modifier =
                Modifier.weight(2f)
                    .height(68.dp)
                    .align(Alignment.CenterVertically)
                    .clip(RoundedCornerShape(16.dp)),
            painter = painterResource(id = R.drawable.card_content_image),
            contentScale = ContentScale.Crop,
            contentDescription = null,
        )
        Spacer(Modifier.width(4.dp))
        Image(
            modifier =
                Modifier.weight(1f)
                    .height(68.dp)
                    .align(Alignment.CenterVertically)
                    .clip(RoundedCornerShape(16.dp)),
            painter = painterResource(id = R.drawable.card_content_image),
            contentScale = ContentScale.Crop,
            contentDescription = null,
        )
    }
}
```

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

Example of an outlined `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TitleCard.composable#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)`:

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

TitleCard(
    onClick = { /* Do something */ },
    title = { Text("Title card") },
    time = { Text("Now") },
    colors = CardDefaults.outlinedCardColors(),
    border = CardDefaults.outlinedCardBorder(),
) {
    Text("Card content")
}
```

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

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

| Parameters |
|---|---|
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Will be called when the user clicks the card |
| `title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for displaying the title of the card, expected to be one or two lines of text. |
| `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#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` 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#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` action. |
| `time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | An optional slot for displaying the time relevant to the contents of the card, expected to be a short piece of text. Depending on whether we have a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` or not, can be placed at the end of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` line or above it. |
| `subtitle: (@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)? = null` | An optional slot for displaying the subtitle of the card, expected to be one line of text. |
| `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://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | The optional body content of the card. If not provided then title and subtitle are expected to be provided |

### TitleCard

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:TitleCard) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0)

```
@Composable
fun TitleCard(
    onClick: () -> Unit,
    containerPainter: Painter,
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    time: (@Composable () -> Unit)? = null,
    subtitle: (@Composable ColumnScope.() -> Unit)? = 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 () -> Unit)? = null
): Unit
```

This `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TitleCard.composable#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` overload supports an image container background and provides an opinionated 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)` with a specific layout to show interactive information about an application, similar to `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TitleCard.composable#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)`.

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/TitleCard.composable#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` takes `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` 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/package-summary#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` fields are optional, but it is expected that at least one of these is provided. The layout will vary according to which fields are supplied - see samples.

If the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` is text it can be single or multiple line and is expected to be Top and Start aligned. When `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` is used `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` shouldn't exceed 2 lines height. Overall the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)`, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` text should be no more than 5 rows of text combined.

If more than one composable is provided in the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` slot it is the responsibility of the caller to determine how to layout the contents, e.g. provide either a row or a column.

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 a background image:

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

TitleCard(
    onClick = { /* Do something */ },
    containerPainter =
        CardDefaults.containerPainter(image = painterResource(id = R.drawable.backgroundimage)),
    title = { Text("Card title") },
    subtitle = { Text("Subtitle") },
    time = { Text("Now") },
    contentPadding = CardDefaults.CardWithContainerPainterContentPadding,
    modifier = Modifier.semantics { contentDescription = "Background image" },
) {
    Text("Card content")
}
```

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

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

| 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/TitleCard.composable#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)`, 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)`. |
| `title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for displaying the title of the card, expected to be one or two lines of text. |
| `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#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` 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#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` action. |
| `time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | An optional slot for displaying the time relevant to the contents of the card, expected to be a short piece of text. Depending on whether we have a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` or not, can be placed at the end of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TitleCard(kotlin.Function0,androidx.compose.ui.graphics.painter.Painter,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Function0,kotlin.Function1,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.Function0)` line or above it. |
| `subtitle: (@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)? = null` | An optional slot for displaying the subtitle of the card, expected to be one line of text. |
| `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://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | The optional body content of the card. If not provided then title and subtitle are expected to be provided |