# OutlinedCard

Common/AllAndroid/JVM

## 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/compose/material3/OutlinedCard.composable#OutlinedCard(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,kotlin.Function1)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/CardColors, elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/CardElevation, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke, 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 )` [Material Design outlined card](https://m3.material.io/components/cards/overview) | Cmn |
| `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/compose/material3/OutlinedCard.composable#OutlinedCard(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,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, 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/compose/material3/CardColors, elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/CardElevation, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke, 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 )` [Material Design outlined card](https://m3.material.io/components/cards/overview) | Cmn |

## Functions

### OutlinedCard

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/Card.kt+function:OutlinedCard)

```
@Composable
fun OutlinedCard(
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.outlinedShape,
    colors: CardColors = CardDefaults.outlinedCardColors(),
    elevation: CardElevation = CardDefaults.outlinedCardElevation(),
    border: BorderStroke = CardDefaults.outlinedCardBorder(),
    content: @Composable ColumnScope.() -> Unit
): Unit
```

[Material Design outlined card](https://m3.material.io/components/cards/overview)

Outlined cards contain content and actions that relate information about a subject. They have a visual boundary around the container. This can provide greater emphasis than the other types.

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

![Outlined card
image](https://developer.android.com/images/reference/androidx/compose/material3/outlined-card.png)

Outlined card sample:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Card
import androidx.compose.material3.OutlinedCard
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

OutlinedCard(Modifier.size(width = 180.dp, height = 100.dp)) {
    Box(Modifier.fillMaxSize()) { Text("Card content", Modifier.align(Alignment.Center)) }
}
```

| Parameters |
|---|---|
| `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 |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = CardDefaults.outlinedShape` | defines the shape of this card's container, border (when `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#OutlinedCard(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,kotlin.Function1)` is not null), and shadow (when using `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#OutlinedCard(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,kotlin.Function1)`) |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/CardColors = CardDefaults.outlinedCardColors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/CardColors` that will be used to resolve the color(s) used for this card in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/CardDefaults#outlinedCardColors()`. |
| `elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/CardElevation = CardDefaults.outlinedCardElevation()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/CardElevation` used to resolve the elevation for this card in different states. This controls the size of the shadow below the card. Additionally, when the container color is `https://developer.android.com/reference/kotlin/androidx/compose/material3/ColorScheme#surface()`, this controls the amount of primary color applied as an overlay. See also: `https://developer.android.com/reference/kotlin/androidx/compose/material3/Surface.composable#Surface(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.BorderStroke,kotlin.Function0)`. |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke = CardDefaults.outlinedCardBorder()` | the border to draw around the container of this card |
| `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` | The content displayed on the card |

### OutlinedCard

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/Card.kt+function:OutlinedCard)

```
@Composable
fun OutlinedCard(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.outlinedShape,
    colors: CardColors = CardDefaults.outlinedCardColors(),
    elevation: CardElevation = CardDefaults.outlinedCardElevation(),
    border: BorderStroke = CardDefaults.outlinedCardBorder(enabled),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit
```

[Material Design outlined card](https://m3.material.io/components/cards/overview)

Outlined cards contain content and actions that relate information about a subject. They have a visual boundary around the container. This can provide greater emphasis than the other types.

This OutlinedCard handles click events, calling its `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#OutlinedCard(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` lambda.

![Outlined card
image](https://developer.android.com/images/reference/androidx/compose/material3/outlined-card.png)

Clickable outlined card sample:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Card
import androidx.compose.material3.OutlinedCard
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

OutlinedCard(
    onClick = { /* Do something */ },
    modifier = Modifier.size(width = 180.dp, height = 100.dp),
) {
    Box(Modifier.fillMaxSize()) { Text("Clickable", Modifier.align(Alignment.Center)) }
}
```

| 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 |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this card. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = CardDefaults.outlinedShape` | defines the shape of this card's container, border (when `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#OutlinedCard(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` is not null), and shadow (when using `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#OutlinedCard(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)`) |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/CardColors = CardDefaults.outlinedCardColors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/CardColors` that will be used to resolve the color(s) used for this card in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/CardDefaults#outlinedCardColors()`. |
| `elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/CardElevation = CardDefaults.outlinedCardElevation()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/CardElevation` used to resolve the elevation for this card in different states. This controls the size of the shadow below the card. Additionally, when the container color is `https://developer.android.com/reference/kotlin/androidx/compose/material3/ColorScheme#surface()`, this controls the amount of primary color applied as an overlay. See also: `https://developer.android.com/reference/kotlin/androidx/compose/material3/Surface.composable#Surface(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.BorderStroke,kotlin.Function0)`. |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke = CardDefaults.outlinedCardBorder(enabled)` | the border to draw around the container of this card |
| `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` | The content displayed on the card |