---
title: "Card"
description: "Cards contain content and actions that relate information about a subject."
type: "component"
---

<div class='type'>Composable Component</div>



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

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@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,
)
```


#### Parameters

| | |
| --- | --- |
| onClick | called when this card is clicked. |
| modifier | the `Modifier` to be applied to this card. |
| onLongClick | called when this card is long clicked (long-pressed). |
| shape | `CardShape` defines the shape of this card's container in different interaction states. See `CardDefaults.shape`. |
| colors | `CardColors` defines the background & content colors used in this card for different interaction states. See `CardDefaults.colors`. |
| scale | `CardScale` defines size of the card relative to its original size for different interaction states. See `CardDefaults.scale`. |
| border | `CardBorder` defines a border around the card for different interaction states. See `CardDefaults.border`. |
| glow | `CardGlow` defines a shadow to be shown behind the card for different interaction states. See `CardDefaults.glow`. |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `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 | defines the `Composable` content inside the Card. |






## Code Examples
### HorizontalImageAspectRatioCardSample
```kotlin
@Composable
fun HorizontalImageAspectRatioCardSample() {
    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),
    ) {}
}
```
### SquareImageAspectRatioCardSample
```kotlin
@Composable
fun SquareImageAspectRatioCardSample() {
    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),
    ) {}
}
```
### VerticalImageAspectRatioCardSample
```kotlin
@Composable
fun VerticalImageAspectRatioCardSample() {
    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),
    ) {}
}
```