Composable Component

Card

Card is a component used to group related information into a single digestible unit.

RevenueCat

RevenueCat

Add subscriptions to your apps in minutes

Ad Get started for free

Card

Android
@Composable
public fun Card(
    modifier: Modifier = Modifier,
    title: @Composable (() -> Unit)? = null,
    subtitle: @Composable (() -> Unit)? = null,
    header: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = CardDefaults.shape,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = CardDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)

Parameters
modifier the Modifier to be applied to this card
title optional title to be placed above subtitle and content, below header
subtitle optional subtitle to be placed above content, below title
header optional header image to be placed at the top of the card. This image should typically fill the max width available, for example using androidx.compose.ui.layout.ContentScale.FillWidth. Headers are constrained to a maximum aspect ratio (1.6) to avoid taking up too much vertical space, so using a modifier such as androidx.compose.foundation.layout.fillMaxSize will result in an image that fills the maximum aspect ratio.
leadingIcon optional leading icon to be placed before content. This is typically an Icon.
trailingIcon optional trailing icon to be placed after content. This is typically an Icon.
shape the Shape used to clip this card, and also used to draw the background and border
color background color of this card
contentColor content color used by components inside content, title, subtitle, leadingIcon, and trailingIcon.
border the border to draw around this card
contentPadding the spacing values to apply internally between the container and the content. Note that there is additional padding applied around the content / text / icons inside a card, this only affects the outermost content padding.
interactionSource an optional hoisted MutableInteractionSource for observing and emitting Interactions 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 the main content / body text to display inside this card. This is recommended to be limited to 10 lines of text.

Card

Android
@Composable
public fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    title: @Composable (() -> Unit)? = null,
    subtitle: @Composable (() -> Unit)? = null,
    header: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = CardDefaults.shape,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = CardDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)

Parameters
onClick called when this card item is clicked
modifier the Modifier to be applied to this card
title optional title to be placed above subtitle and content, below header
subtitle optional subtitle to be placed above content, below title
header optional header image to be placed at the top of the card. This image should typically fill the max width available, for example using androidx.compose.ui.layout.ContentScale.FillWidth. Headers are constrained to a maximum aspect ratio (1.6) to avoid taking up too much vertical space, so using a modifier such as androidx.compose.foundation.layout.fillMaxSize will result in an image that fills the maximum aspect ratio.
leadingIcon optional leading icon to be placed before content. This is typically an Icon.
trailingIcon optional trailing icon to be placed after content. This is typically an Icon.
shape the Shape used to clip this card, and also used to draw the background and border
color background color of this card
contentColor content color used by components inside content, title, subtitle, leadingIcon, and trailingIcon.
border the border to draw around this card
contentPadding the spacing values to apply internally between the container and the content. Note that there is additional padding applied around the content / text / icons inside a card, this only affects the outermost content padding.
interactionSource an optional hoisted MutableInteractionSource for observing and emitting Interactions 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 the main content / body text to display inside this card. This is recommended to be limited to 10 lines of text.

Card

Android
@Composable
public fun Card(
    action: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    title: @Composable (() -> Unit)? = null,
    subtitle: @Composable (() -> Unit)? = null,
    header: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = CardDefaults.shape,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = CardDefaults.contentPadding,
    content: @Composable () -> Unit,
)

Parameters
action the action for this card. This should be a Button, and represents the action performed when a user interacts with this card. The action is placed overlapping the bottom edge of the card.
modifier the Modifier to be applied to the outer layout containing the card and action
title optional title to be placed above subtitle and content, below header
subtitle optional subtitle to be placed above content, below title
header optional header image to be placed at the top of the card. This image should typically fill the max width available, for example using androidx.compose.ui.layout.ContentScale.FillWidth. Headers are constrained to a maximum aspect ratio (1.6) to avoid taking up too much vertical space, so using a modifier such as androidx.compose.foundation.layout.fillMaxSize will result in an image that fills the maximum aspect ratio.
leadingIcon optional leading icon to be placed before content. This is typically an Icon.
trailingIcon optional trailing icon to be placed after content. This is typically an Icon.
shape the Shape used to clip this card, and also used to draw the background and border
color background color of this card
contentColor content color used by components inside content, title, subtitle, leadingIcon, and trailingIcon.
border the border to draw around this card
contentPadding the spacing values to apply internally between the container and the content. Note that there is additional padding applied around the content / text / icons inside a card, this only affects the outermost content padding.
content the main content / body text to display inside this card. This is recommended to be limited to 10 lines of text.