State of Compose 2023 results are in! Click here to learn more

← Back to Material 3 Compose

OutlinedCard

Component
in
Material 3
. Since 1.0.0

Overview

Code Examples

<a href="https://m3.material.io/components/cards/overview" class="external" target="_blank">Material Design outlined card</a>.

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:

Overloads

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
)

Parameters

NameDescription
modifierthe Modifier to be applied to this card
shapedefines the shape of this card's container, border (when border is not null), and shadow (when using elevation)
colorsCardColors that will be used to resolve the color(s) used for this card in different states. See CardDefaults.outlinedCardColors.
elevationCardElevation 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 ColorScheme.surface, this controls the amount of primary color applied as an overlay. See also: Surface.
borderthe border to draw around the container of this car

OutlinedCard

@ExperimentalMaterial3Api
@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 = remember { MutableInteractionSource() },
    content: @Composable ColumnScope.() -> Unit
)

Parameters

NameDescription
onClickcalled when this card is clicked
modifierthe Modifier to be applied to this card
enabledcontrols 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.
shapedefines the shape of this card's container, border (when border is not null), and shadow (when using elevation)
colorsCardColors that will be used to resolve the color(s) used for this card in different states. See CardDefaults.outlinedCardColors.
elevationCardElevation 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 ColorScheme.surface, this controls the amount of primary color applied as an overlay. See also: Surface.
borderthe border to draw around the container of this card
interactionSourcethe MutableInteractionSource representing the stream of Interactions for this card. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this card in different states