---
title: "ListSubHeader"
description: "A two slot based composable for creating a list sub-header item. `ListSubHeader`s offer slots for
an icon and for a text label. The contents will be start and end padded."
type: "component"
---

<div class='type'>Composable Component</div>



A two slot based composable for creating a list sub-header item. `ListSubHeader`s offer slots for
an icon and for a text label. The contents will be start and end padded.

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun ListSubHeader(
    modifier: Modifier = Modifier,
    backgroundColor: Color = Color.Transparent,
    contentColor: Color = ListHeaderDefaults.subHeaderContentColor,
    contentPadding: PaddingValues = ListHeaderDefaults.SubHeaderContentPadding,
    transformation: SurfaceTransformation? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    label: @Composable RowScope.() -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| modifier | The modifier for the `ListSubHeader`. |
| backgroundColor | The background color to apply - typically Color.Transparent |
| contentColor | The color to apply to content. |
| contentPadding | The spacing values to apply internally between the background and the content. |
| transformation | Transformer to be used when header appears inside the container that needs to dynamically change its content separately from the background. |
| icon | A slot for providing icon to the `ListSubHeader`. |
| label | A slot for providing label to the `ListSubHeader`. |






## Code Examples
### ListHeaderSample
```kotlin
@Preview
@Composable
fun ListHeaderSample() {
    val scrollState = rememberScalingLazyListState()
    ScreenScaffold(scrollState = scrollState, modifier = Modifier.background(Color.Black)) {
        contentPadding ->
        ScalingLazyColumn(
            state = scrollState,
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            contentPadding = contentPadding,
        ) {
            item { ListHeader { Text("Settings") } }
            item {
                ListSubHeader(
                    icon = {
                        Icon(
                            painter = painterResource(R.drawable.ic_connectivity),
                            contentDescription = "Connectivity",
                        )
                    },
                    label = { Text("Connectivity") },
                )
            }
            item {
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = {},
                    icon = {
                        Icon(
                            painter = painterResource(R.drawable.ic_bluetooth),
                            contentDescription = "Bluetooth",
                            modifier = Modifier.size(ButtonDefaults.IconSize),
                        )
                    },
                ) {
                    Text("Bluetooth")
                }
            }
            item {
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = {},
                    icon = {
                        Icon(
                            painter = painterResource(R.drawable.ic_wifi),
                            contentDescription = "Wifi",
                            modifier = Modifier.size(ButtonDefaults.IconSize),
                        )
                    },
                ) {
                    Text("Wifi")
                }
            }
            item { ListSubHeader { Text("Display") } }
            item {
                Button(modifier = Modifier.fillMaxWidth(), onClick = {}) {
                    Text("Change Watchface")
                }
            }
            item { Button(modifier = Modifier.fillMaxWidth(), onClick = {}) { Text("Brightness") } }
        }
    }
}
```