Card
A bordered, shadowed surface with composable slots for header, title, description, content, and footer.
Card is a Column-based container with a rounded border, a drop shadow, and a card background from the active theme. Five slot composables — CardHeader, CardTitle, CardDescription, CardContent, and CardFooter — provide consistent padding and typography without any required nesting order.
Basic usage
With background image
Pass any composable directly inside Card without using the slot helpers. Coil3's AsyncImage fills the card naturally since Card is a ColumnScope.
Custom radius
radius accepts any Dp value to override the default lg corner rounding.
Custom shadow
Pass a List<BoxShadow> to shadow to adjust depth or remove the shadow entirely. Use MaterialTheme.shadow presets or supply your own values.
Override the global shadow scale by extending
BoxShadowand passing it toKomoTheme.
Centered header
CardHeader and CardContent accept horizontalAlignment so you can center content without extra wrappers.
API reference
Card
| Parameter | Type | Default | Description |
|---|---|---|---|
modifier | Modifier | Modifier | Applied to the inner Column content area. |
radius | Dp | MaterialTheme.radius.lg | Corner radius for the card border and clip. |
shadow | List<BoxShadow> | MaterialTheme.styles.shadow() | Drop shadow(s) drawn behind the card. Pass emptyList() to remove. |
content | @Composable ColumnScope.() -> Unit | — | Card body; receives ColumnScope so standard column modifiers apply. |
CardHeader
| Parameter | Type | Default | Description |
|---|---|---|---|
modifier | Modifier | Modifier | Applied after the default full-width 16 dp padding. |
horizontalAlignment | Alignment.Horizontal | Alignment.Start | Horizontal alignment of header children. |
content | @Composable ColumnScope.() -> Unit | — | Header content; typically CardTitle and CardDescription. |
CardTitle
| Parameter | Type | Default | Description |
|---|---|---|---|
modifier | Modifier | Modifier | Applied to the wrapper column. |
content | @Composable () -> Unit | — | Title content. Rendered semibold at 18 sp using cardForeground. |
CardDescription
| Parameter | Type | Default | Description |
|---|---|---|---|
modifier | Modifier | Modifier | Applied to the wrapper column. |
content | @Composable () -> Unit | — | Description content. Rendered at 14 sp using mutedForeground. |
CardContent
| Parameter | Type | Default | Description |
|---|---|---|---|
modifier | Modifier | Modifier | Applied after the default horizontal 16 dp padding. |
horizontalAlignment | Alignment.Horizontal | Alignment.Start | Horizontal alignment of content children. |
content | @Composable ColumnScope.() -> Unit | — | Main body content. |
CardFooter
| Parameter | Type | Default | Description |
|---|---|---|---|
modifier | Modifier | Modifier | Applied after the default full-width 16 dp padding. |
horizontalArrangement | Arrangement.Horizontal | Arrangement.Start | Horizontal arrangement of footer children. |
content | @Composable RowScope.() -> Unit | — | Footer content; laid out in a Row aligned to center vertically. |