# RemoteTitleCard

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteTitleCard.composable#RemoteTitleCard(androidx.compose.remote.creation.compose.action.RemoteAction,kotlin.Function0,androidx.compose.remote.creation.compose.modifier.RemoteModifier,kotlin.Function0,kotlin.Function0,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)( onClick: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/action/RemoteAction, title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/modifier/RemoteModifier, time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> 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/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, enabled: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/state/RemoteBoolean, shape: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/shapes/RemoteShape, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardColors, border: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteBorderStroke?, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemotePaddingValues, content: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? )` Opinionated Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCard.composable#RemoteCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)` 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/remote/creation/compose/layout/RemoteComposable @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteTitleCard.composable#RemoteTitleCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.painter.RemotePainter,kotlin.Function0,androidx.compose.remote.creation.compose.modifier.RemoteModifier,kotlin.Function0,kotlin.Function0,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)( onClick: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/action/RemoteAction, containerPainter: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/painter/RemotePainter, title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/modifier/RemoteModifier, time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> 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/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, enabled: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/state/RemoteBoolean, shape: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/shapes/RemoteShape, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardColors, border: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteBorderStroke?, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemotePaddingValues, content: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? )` Opinionated Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCard.composable#RemoteCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)` that offers a specific layout to show interactive information about an application, e.g. a message, with a background image. |

## Functions

### RemoteTitleCard

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

```
@RemoteComposable
@Composable
fun RemoteTitleCard(
    onClick: RemoteAction,
    title: @Composable @RemoteComposable () -> Unit,
    modifier: RemoteModifier = RemoteModifier,
    time: (@Composable @RemoteComposable () -> Unit)? = null,
    subtitle: (@Composable @RemoteComposable () -> Unit)? = null,
    enabled: RemoteBoolean = true.rb,
    shape: RemoteShape = RemoteCardDefaults.shape,
    colors: RemoteCardColors = RemoteCardDefaults.cardColors(),
    border: RemoteBorderStroke? = null,
    contentPadding: RemotePaddingValues = RemoteCardDefaults.ContentPadding,
    content: (@Composable @RemoteComposable () -> Unit)? = null
): Unit
```

Opinionated Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCard.composable#RemoteCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)` that offers a specific layout to show interactive information about an application, e.g. a message.

```kotlin
import androidx.compose.remote.creation.compose.action.RemoteAction
import androidx.compose.remote.creation.compose.modifier.RemoteModifier
import androidx.compose.remote.creation.compose.modifier.padding
import androidx.compose.remote.creation.compose.state.rdp
import androidx.compose.remote.creation.compose.state.rs
import androidx.wear.compose.remote.material3.RemoteText
import androidx.wear.compose.remote.material3.RemoteTitleCard

RemoteTitleCard(
    onClick = RemoteAction.Empty,
    title = { RemoteText("Title Card Title".rs) },
    time = { RemoteText("now".rs) },
    modifier = RemoteModifier.padding(16.rdp),
    subtitle = { RemoteText("Card Subtitle here".rs) },
) {
    RemoteText("This is a sample Title Card.".rs)
}
```

| Parameters |
|---|---|
| `onClick: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/action/RemoteAction` | 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/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for displaying the title of the card |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/modifier/RemoteModifier = RemoteModifier` | Modifier to be applied to the card |
| `time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> 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 |
| `subtitle: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | An optional slot for displaying the subtitle of the card |
| `enabled: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/state/RemoteBoolean = true.rb` | Controls the enabled state of the card. When false, this component will not respond to user input |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/shapes/RemoteShape = RemoteCardDefaults.shape` | Defines the card's shape. |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardColors = RemoteCardDefaults.cardColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardColors` that will be used to resolve the colors used for this card. |
| `border: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteBorderStroke? = null` | A `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteBorderStroke` used for drawing the card's outline border |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemotePaddingValues = RemoteCardDefaults.ContentPadding` | The spacing values to apply internally between the container and the content |
| `content: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | The optional body content of the card. |

### RemoteTitleCard

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

```
@RemoteComposable
@Composable
fun RemoteTitleCard(
    onClick: RemoteAction,
    containerPainter: RemotePainter,
    title: @Composable @RemoteComposable () -> Unit,
    modifier: RemoteModifier = RemoteModifier,
    time: (@Composable @RemoteComposable () -> Unit)? = null,
    subtitle: (@Composable @RemoteComposable () -> Unit)? = null,
    enabled: RemoteBoolean = true.rb,
    shape: RemoteShape = RemoteCardDefaults.shape,
    colors: RemoteCardColors = RemoteCardDefaults.cardWithContainerPainterColors(),
    border: RemoteBorderStroke? = null,
    contentPadding: RemotePaddingValues = RemoteCardDefaults.CardWithContainerPainterContentPadding,
    content: (@Composable @RemoteComposable () -> Unit)? = null
): Unit
```

Opinionated Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCard.composable#RemoteCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)` that offers a specific layout to show interactive information about an application, e.g. a message, with a background image.

An Image background is a means to reinforce the meaning of information in a Card, e.g. to help to contextualize the information. Cards should have a content color that contrasts with the background image and scrim. This `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteTitleCard.composable#RemoteTitleCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.painter.RemotePainter,kotlin.Function0,androidx.compose.remote.creation.compose.modifier.RemoteModifier,kotlin.Function0,kotlin.Function0,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)` takes `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/package-summary#RemoteTitleCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.painter.RemotePainter,kotlin.Function0,androidx.compose.remote.creation.compose.modifier.RemoteModifier,kotlin.Function0,kotlin.Function0,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)` for the container image background to be drawn (the `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardColors` containerColor property is ignored). It is recommended to use `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardDefaults#containerPainter(androidx.compose.remote.creation.compose.state.RemoteImageBitmap,androidx.compose.remote.creation.compose.shaders.RemoteBrush,androidx.compose.remote.creation.compose.state.RemoteFloat,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.ui.layout.ContentScale)` 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.

```kotlin
import androidx.compose.remote.creation.compose.action.RemoteAction
import androidx.compose.remote.creation.compose.modifier.RemoteModifier
import androidx.compose.remote.creation.compose.modifier.padding
import androidx.compose.remote.creation.compose.state.RemoteImageBitmap.Companion.createNamedRemoteImageBitmap
import androidx.compose.remote.creation.compose.state.rdp
import androidx.compose.remote.creation.compose.state.rs
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.asImageBitmap
import androidx.wear.compose.remote.material3.RemoteCardDefaults
import androidx.wear.compose.remote.material3.RemoteText
import androidx.wear.compose.remote.material3.RemoteTitleCard
import androidx.wear.compose.remote.material3.previews.utils.createImage

val backgroundImage = remember {
    createNamedRemoteImageBitmap(name = "backgroundImage") {
        createImage(200, 200).asImageBitmap()
    }
}
val containerPainter = RemoteCardDefaults.containerPainter(backgroundImage)
RemoteTitleCard(
    onClick = RemoteAction.Empty,
    containerPainter = containerPainter,
    title = { RemoteText("Title Card".rs) },
    time = { RemoteText("now".rs) },
    modifier = RemoteModifier.padding(16.rdp),
    subtitle = { RemoteText("Card Subtitle".rs) },
) {
    RemoteText("Card with background image.".rs)
}
```

| Parameters |
|---|---|
| `onClick: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/action/RemoteAction` | Will be called when the user clicks the card |
| `containerPainter: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/painter/RemotePainter` | The `https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/painter/RemotePainter` to use to draw the container image of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteTitleCard.composable#RemoteTitleCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.painter.RemotePainter,kotlin.Function0,androidx.compose.remote.creation.compose.modifier.RemoteModifier,kotlin.Function0,kotlin.Function0,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)`, such as returned by `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardDefaults#containerPainter(androidx.compose.remote.creation.compose.state.RemoteImageBitmap,androidx.compose.remote.creation.compose.shaders.RemoteBrush,androidx.compose.remote.creation.compose.state.RemoteFloat,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.ui.layout.ContentScale)`. |
| `title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for displaying the title of the card |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/modifier/RemoteModifier = RemoteModifier` | Modifier to be applied to the card |
| `time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> 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 |
| `subtitle: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | An optional slot for displaying the subtitle of the card |
| `enabled: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/state/RemoteBoolean = true.rb` | Controls the enabled state of the card. When false, this component will not respond to user input |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/shapes/RemoteShape = RemoteCardDefaults.shape` | Defines the card's shape. |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardColors = RemoteCardDefaults.cardWithContainerPainterColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardColors` that will be used to resolve the colors used for this card. |
| `border: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteBorderStroke? = null` | A `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteBorderStroke` used for drawing the card's outline border |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemotePaddingValues = RemoteCardDefaults.CardWithContainerPainterContentPadding` | The spacing values to apply internally between the container and the content |
| `content: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | The optional body content of the card. |