Skip to content
Telescope
Components

List

A set of text objects in a bulleted or numbered format.
  1. Use your Pleo card to pay for something
  2. Capture the receipt, enter some quick details
  3. That’s it!

Features

  • Create an ordered or unordered list.
  • Show bullets or numbers.
  • Use custom icons as bullets.

Examples

Unordered list with bullets

Show code
<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

Show code
<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.

Show code
<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: A versatile element that can display information in a clear and organized manner.
  • Table: A component for displaying large amounts of data in rows and columns.
  • Text: A primitive component that can be used to create all kinds of text styles.
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page