# Card

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/tv/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,androidx.tv.material3.CardShape,androidx.tv.material3.CardColors,androidx.tv.material3.CardScale,androidx.tv.material3.CardBorder,androidx.tv.material3.CardGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)( onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, shape: https://developer.android.com/reference/kotlin/androidx/tv/material3/CardShape, colors: https://developer.android.com/reference/kotlin/androidx/tv/material3/CardColors, scale: https://developer.android.com/reference/kotlin/androidx/tv/material3/CardScale, border: https://developer.android.com/reference/kotlin/androidx/tv/material3/CardBorder, glow: https://developer.android.com/reference/kotlin/androidx/tv/material3/CardGlow, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Cards contain content and actions that relate information about a subject. |

## Functions

### Card

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/Card.kt+function:Card) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/tv#1.0.0)

```
@Composable
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    shape: CardShape = CardDefaults.shape(),
    colors: CardColors = CardDefaults.colors(),
    scale: CardScale = CardDefaults.scale(),
    border: CardBorder = CardDefaults.border(),
    glow: CardGlow = CardDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit
```

Cards contain content and actions that relate information about a subject.

This Card handles click events, calling its `https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,androidx.tv.material3.CardShape,androidx.tv.material3.CardColors,androidx.tv.material3.CardScale,androidx.tv.material3.CardBorder,androidx.tv.material3.CardGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` lambda.

Checkout [TV Guidelines for Aspect ratios](https://developer.android.com/design/ui/tv/guides/components/cards#usage) for cards

```kotlin
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Border
import androidx.tv.material3.Card
import androidx.tv.material3.CardDefaults

Card(
    onClick = {},
    modifier = Modifier.width(200.dp).aspectRatio(CardDefaults.HorizontalImageAspectRatio),
    border =
        CardDefaults.border(
            focusedBorder =
                Border(
                    border = BorderStroke(width = 3.dp, color = Color.Green),
                    shape = RoundedCornerShape(5),
                )
        ),
    colors =
        CardDefaults.colors(containerColor = Color.Red, focusedContainerColor = Color.Yellow),
    scale = CardDefaults.scale(focusedScale = 1.05f),
) {}
```

```kotlin
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Border
import androidx.tv.material3.Card
import androidx.tv.material3.CardDefaults

Card(
    onClick = {},
    modifier = Modifier.width(200.dp).aspectRatio(CardDefaults.VerticalImageAspectRatio),
    border =
        CardDefaults.border(
            focusedBorder =
                Border(
                    border = BorderStroke(width = 3.dp, color = Color.Green),
                    shape = RoundedCornerShape(5),
                )
        ),
    colors =
        CardDefaults.colors(containerColor = Color.Red, focusedContainerColor = Color.Yellow),
    scale = CardDefaults.scale(focusedScale = 1.05f),
) {}
```

```kotlin
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Border
import androidx.tv.material3.Card
import androidx.tv.material3.CardDefaults

Card(
    onClick = {},
    modifier = Modifier.width(150.dp).aspectRatio(CardDefaults.SquareImageAspectRatio),
    border =
        CardDefaults.border(
            focusedBorder = Border(border = BorderStroke(width = 3.dp, color = Color.Green))
        ),
    shape = CardDefaults.shape(shape = CircleShape),
    colors =
        CardDefaults.colors(containerColor = Color.Red, focusedContainerColor = Color.Yellow),
    scale = CardDefaults.scale(focusedScale = 1.05f),
) {}
```

| Parameters |
|---|---|
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | called when this card is clicked. |
| `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 card. |
| `onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | called when this card is long clicked (long-pressed). |
| `shape: https://developer.android.com/reference/kotlin/androidx/tv/material3/CardShape = CardDefaults.shape()` | `https://developer.android.com/reference/kotlin/androidx/tv/material3/CardShape` defines the shape of this card's container in different interaction states. See `https://developer.android.com/reference/kotlin/androidx/tv/material3/CardDefaults#shape(androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Shape)`. |
| `colors: https://developer.android.com/reference/kotlin/androidx/tv/material3/CardColors = CardDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/tv/material3/CardColors` defines the background \& content colors used in this card for different interaction states. See `https://developer.android.com/reference/kotlin/androidx/tv/material3/CardDefaults#colors(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)`. |
| `scale: https://developer.android.com/reference/kotlin/androidx/tv/material3/CardScale = CardDefaults.scale()` | `https://developer.android.com/reference/kotlin/androidx/tv/material3/CardScale` defines size of the card relative to its original size for different interaction states. See `https://developer.android.com/reference/kotlin/androidx/tv/material3/CardDefaults#scale(kotlin.Float,kotlin.Float,kotlin.Float)`. |
| `border: https://developer.android.com/reference/kotlin/androidx/tv/material3/CardBorder = CardDefaults.border()` | `https://developer.android.com/reference/kotlin/androidx/tv/material3/CardBorder` defines a border around the card for different interaction states. See `https://developer.android.com/reference/kotlin/androidx/tv/material3/CardDefaults#border(androidx.tv.material3.Border,androidx.tv.material3.Border,androidx.tv.material3.Border)`. |
| `glow: https://developer.android.com/reference/kotlin/androidx/tv/material3/CardGlow = CardDefaults.glow()` | `https://developer.android.com/reference/kotlin/androidx/tv/material3/CardGlow` defines a shadow to be shown behind the card for different interaction states. See `https://developer.android.com/reference/kotlin/androidx/tv/material3/CardDefaults#glow(androidx.tv.material3.Glow,androidx.tv.material3.Glow,androidx.tv.material3.Glow)`. |
| `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. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | defines the `https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` content inside the Card. |