# StandardCardContainer

## 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/tv/material3/StandardCardContainer.composable#StandardCardContainer(kotlin.Function1,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,androidx.tv.material3.CardContainerColors,androidx.compose.foundation.interaction.MutableInteractionSource)( imageCard: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, subtitle: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, description: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, contentColor: https://developer.android.com/reference/kotlin/androidx/tv/material3/CardContainerColors, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource )` `https://developer.android.com/reference/kotlin/androidx/tv/material3/StandardCardContainer.composable#StandardCardContainer(kotlin.Function1,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,androidx.tv.material3.CardContainerColors,androidx.compose.foundation.interaction.MutableInteractionSource)` is an opinionated TV Material Card layout with an image and text content to show information about a subject. |

## Functions

### StandardCardContainer

Artifact: [androidx.tv:tv-material](https://developer.android.com/jetpack/androidx/releases/tv) [View Source](https://cs.android.com/search?q=file:androidx/tv/material3/CardContainer.kt+function:StandardCardContainer) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/tv#1.0.0)

```
@Composable
fun StandardCardContainer(
    imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    subtitle: @Composable () -> Unit = {},
    description: @Composable () -> Unit = {},
    contentColor: CardContainerColors = CardContainerDefaults.contentColor(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/tv/material3/StandardCardContainer.composable#StandardCardContainer(kotlin.Function1,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,androidx.tv.material3.CardContainerColors,androidx.compose.foundation.interaction.MutableInteractionSource)` is an opinionated TV Material Card layout with an image and text content to show information about a subject.

It provides a vertical layout with an image card slot at the top. And below that, there are slots for the title, subtitle and description.

![Standard
Card](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/standard-card.webp)

Checkout TV design guidelines to learn more about [Material Standard Card]("https://developer.android.com/design/ui/tv/guides/components/cards#standard-card").

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Card
import androidx.tv.material3.StandardCardContainer
import androidx.tv.material3.Text

StandardCardContainer(
    modifier = Modifier.size(150.dp, 120.dp),
    imageCard = { interactionSource ->
        Card(onClick = {}, interactionSource = interactionSource) {
            Box(modifier = Modifier.fillMaxWidth().height(80.dp).background(Color.Blue))
        }
    },
    title = { Text("Standard Card") },
)
```

| Parameters |
|---|---|
| `imageCard: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | defines the `https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` to be used for the image card. |
| `title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | defines the `https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` title placed below the image card in the CardContainer. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this CardContainer. |
| `subtitle: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = {}` | defines the `https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` supporting text placed below the title in CardContainer. |
| `description: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = {}` | defines the `https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` description placed below the subtitle in CardContainer. |
| `contentColor: https://developer.android.com/reference/kotlin/androidx/tv/material3/CardContainerColors = CardContainerDefaults.contentColor()` | `https://developer.android.com/reference/kotlin/androidx/tv/material3/CardContainerColors` defines the content color used in the CardContainer for different interaction states. See `https://developer.android.com/reference/kotlin/androidx/tv/material3/CardContainerDefaults#contentColor(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)`. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` | a 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 CardContainer. This interaction source param would also be forwarded to be used with the `imageCard` composable. |