# List

A set of text objects in a bulleted or numbered format.

Tabs: [Guidelines](/components/web/list/list.guidelines.md) · [Code](/components/web/list/list.code.md)

## Features

- Create an ordered or unordered list.

- Show bullets or numbers.

- Use custom icons as bullets.

## Examples

### Unordered list with bullets

```tsx
<List listStyle="bullet" as="ul">
    <List.Item>See and edit expenses</List.Item>
    <List.Item>Edit accounting settings</List.Item>
    <List.Item>Export transactions</List.Item>
</List>
```

### Ordered list with numbers

```tsx
<List as="ol" listStyle="number">
    <List.Item>Use your Pleo card to pay for something</List.Item>
    <List.Item>Capture the receipt, enter some quick details</List.Item>
    <List.Item>That’s it!</List.Item>
</List>
```

## With icons

Use the `ListIcon` if you need a custom bullet icon.

```tsx
<List>
    <List.Item>
        <ListIcon as={Check} color={tokens.colorContentStatic} />
        Individual spending limits
    </List.Item>
    <List.Item>
        <ListIcon as={Check} color={tokens.colorContentStatic} />
        Automated expense reports
    </List.Item>
    <List.Item>
        <ListIcon as={Close} color={tokens.colorContentStaticQuiet} />
        Individual spending limits
    </List.Item>
</List>
```

## Related components

- [List item](/components/web/list-item/list-item.guidelines): A versatile element that can display information in a clear and organized manner.
- [Table](/components/web/table/table.guidelines): A component for displaying large amounts of data in rows and columns.
- [Text](/components/web/text/text.guidelines): A primitive component that can be used to create all kinds of text styles.