---
title: "LeadingImageCard"
description: "LeadingImageCard is a component used to group related information into a single digestible unit, featuring a leading [image]."
type: "component"
lastmod: "2026-09-24"
---
## API Reference

### LeadingImageCard

> Source set: Android

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

#### Parameters

| | |
| --- | --- |
| image | the image to be placed before the text content. This image is allocated 30% of the card width. |
| 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` |
| subtitle | optional subtitle to be placed above `content`, below `title` |
| 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`, and `subtitle` |
| contentPadding | the spacing values to apply internally between the container and the content. Note that there is additional padding applied around the content / text / image 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. |

### LeadingImageCard

> Source set: Android

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

#### Parameters

| | |
| --- | --- |
| onClick | called when this card item is clicked |
| image | the image to be placed before the text content. This image is allocated 30% of the card width. |
| 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` |
| subtitle | optional subtitle to be placed above `content`, below `title` |
| 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`, and `subtitle` |
| contentPadding | the spacing values to apply internally between the container and the content. Note that there is additional padding applied around the content / text / image 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. |