# List item pattern 01

List item Pattern 01 provides a predefined layout for displaying structured information in a list.


## Overview

### When to use

Use Pattern 01 when displaying structured information that users need to scan, compare or interact with. Common examples include:

### Layout examples

### Interaction

Pattern 01 supports both static and interactive list items.

Depending on the use case, a list item can be:

- **Static** – displays information without interaction.
- **Selectable** – allows users to select one or more items.
- **Navigational** – takes users to another view or destination.
- **Selectable and navigational** – supports both selection and navigation within the same item.

Use the same interaction pattern consistently throughout a list to create a predictable user experience.

### Slots

List item pattern 01 is built around three slots that help organise content in a consistent and predictable way.

#### Lead slot

Use for icons, avatars, or custom leading content. When `selectable` is enabled, it shows a checkbox.

#### Content slot

The Content slot is fully customizable and can contain any content needed for your use case.

For the recommended layout, use the `Items` property. It provides predefined content styles and supports one, two or three content columns, making it easy to create consistent and scannable list items.

If your layout requires more flexibility than the `Items` property supports, you can instead provide custom content through the Content slot.

#### Trail slot

Use the **Trail** slot for secondary content, such as values, status, metadata or actions. Keep trailing content concise and avoid placing the primary information here.

When a list item is configured as navigational**** (`href)`, a chevron icon is automatically displayed in the Trail slot. When configured as `selectable`**** and**** `navigational`, the Trail slot instead displays an icon button with a chevron icon, indicating both selection and navigation.

### Do's and don'ts