---
title: "ImageCard"
description: "ImageCard is a version of a card that contains a primary [image] that is placed at the top of the card."
type: "component"
lastmod: "2026-09-24"
---
## API Reference

### ImageCard

> Source set: Android

```kotlin
@Composable
public fun ImageCard(
    image: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    title: @Composable (() -> Unit)? = null,
    subtitle: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = ImageCardDefaults.shape,
    color: Color = ImageCardDefaults.color,
    contentColor: Color = ImageCardDefaults.contentColor(color),
    contentPadding: PaddingValues = ImageCardDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)
```

#### Parameters

| | |
| --- | --- |
| image | 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](/jetpack-compose/androidx.compose.foundation/foundation/functions/fillWidth). Images 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](/jetpack-compose/androidx.xr.compose/compose/functions/fillMaxSize) will result in an image that fills the maximum aspect ratio. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this card |
| title | optional title to be placed above `subtitle` and `content`, below [image](/jetpack-compose/androidx.compose.remote/remote-creation-compose/functions/image) |
| subtitle | optional subtitle to be placed above `content`, below `title` |
| leadingIcon | optional leading icon to be placed before `content`. This is typically an [Icon](/jetpack-compose/androidx.xr.glimmer/glimmer/components/Icon) tinted with [contentColor](/jetpack-compose/androidx.compose.foundation/foundation/properties/contentColor) by default. |
| trailingIcon | optional trailing icon to be placed after `content`. This is typically an [Icon](/jetpack-compose/androidx.xr.glimmer/glimmer/components/Icon) tinted with [contentColor](/jetpack-compose/androidx.compose.foundation/foundation/properties/contentColor) by default. |
| shape | the [Shape](/jetpack-compose/androidx.compose.ui/ui-graphics/interfaces/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`. |
| 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](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/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. |

### ImageCard

> Source set: Android

```kotlin
@Composable
public fun ImageCard(
    onClick: () -> Unit,
    image: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    title: @Composable (() -> Unit)? = null,
    subtitle: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = ImageCardDefaults.shape,
    color: Color = ImageCardDefaults.color,
    contentColor: Color = ImageCardDefaults.contentColor(color),
    contentPadding: PaddingValues = ImageCardDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)
```

#### Parameters

| | |
| --- | --- |
| onClick | called when this card item is clicked |
| image | 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](/jetpack-compose/androidx.compose.foundation/foundation/functions/fillWidth). Images 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](/jetpack-compose/androidx.xr.compose/compose/functions/fillMaxSize) will result in an image that fills the maximum aspect ratio. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this card |
| title | optional title to be placed above `subtitle` and `content`, below [image](/jetpack-compose/androidx.compose.remote/remote-creation-compose/functions/image) |
| subtitle | optional subtitle to be placed above `content`, below `title` |
| leadingIcon | optional leading icon to be placed before `content`. This is typically an [Icon](/jetpack-compose/androidx.xr.glimmer/glimmer/components/Icon) tinted with [contentColor](/jetpack-compose/androidx.compose.foundation/foundation/properties/contentColor) by default. |
| trailingIcon | optional trailing icon to be placed after `content`. This is typically an [Icon](/jetpack-compose/androidx.xr.glimmer/glimmer/components/Icon) tinted with [contentColor](/jetpack-compose/androidx.compose.foundation/foundation/properties/contentColor) by default. |
| shape | the [Shape](/jetpack-compose/androidx.compose.ui/ui-graphics/interfaces/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`. |
| 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](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/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. |

## Code Examples

### ImageCardSample

```kotlin
@Sampled
@Composable
fun ImageCardSample() {
    ImageCard(
        image = { Image(MyImage, "Localized description", contentScale = ContentScale.FillWidth) }
    ) {
        Text("This is an image card")
    }
}
```

### ImageCardWithTitleAndSubtitleAndLeadingIconSample

```kotlin
@Sampled
@Composable
fun ImageCardWithTitleAndSubtitleAndLeadingIconSample() {
    ImageCard(
        image = { Image(MyImage, "Localized description", contentScale = ContentScale.FillWidth) },
        title = { Text("Title") },
        subtitle = { Text("Subtitle") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
    ) {
        Text("This is an image card with a title, subtitle, and leading icon")
    }
}
```

### ClickableImageCardSample

```kotlin
@Sampled
@Composable
fun ClickableImageCardSample() {
    ImageCard(
        onClick = {},
        image = { Image(MyImage, "Localized description", contentScale = ContentScale.FillWidth) },
    ) {
        Text("This is an image card")
    }
}
```

### ClickableImageCardWithTitleAndSubtitleAndLeadingIconSample

```kotlin
@Sampled
@Composable
fun ClickableImageCardWithTitleAndSubtitleAndLeadingIconSample() {
    ImageCard(
        onClick = {},
        image = { Image(MyImage, "Localized description", contentScale = ContentScale.FillWidth) },
        title = { Text("Title") },
        subtitle = { Text("Subtitle") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
    ) {
        Text("This is an image card with a title, subtitle, and leading icon")
    }
}

// -------------------------------------------------------------------------------------------------
// Leading/Trailing ImageCard samples
// -------------------------------------------------------------------------------------------------
```