Components

List(React)

Styling lists with bullets, numbers, or letters.

Version:	`14.16.0` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
Import:	`import { List, ListItem } from '@thumbtack/thumbprint-react';`

List variations

Bullet

item one
item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
item three

<List>
    <ListItem>item one</ListItem>
    <ListItem>
        item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
    </ListItem>
    <ListItem>item three</ListItem>
</List>

<List>
    <ListItem>item one</ListItem>
    <ListItem>
        item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
    </ListItem>
    <ListItem>item three</ListItem>
</List>

Number

item one
item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
item three

<List theme="decimal">
    <ListItem>item one</ListItem>
    <ListItem>
        item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
    </ListItem>
    <ListItem>item three</ListItem>
</List>

<List theme="decimal">
    <ListItem>item one</ListItem>
    <ListItem>
        item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
    </ListItem>
    <ListItem>item three</ListItem>
</List>

Lower alpha

item one
item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
item three

<List theme="alpha">
    <ListItem>item one</ListItem>
    <ListItem>
        item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
    </ListItem>
    <ListItem>item three</ListItem>
</List>

<List theme="alpha">
    <ListItem>item one</ListItem>
    <ListItem>
        item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
    </ListItem>
    <ListItem>item three</ListItem>
</List>

Props

List

children
List items to render. Should be instances of ListItem.
Type
React.ReactNode
theme
Controls the theme of the markers applied to each list item.
Type
This prop can be one of the following 3 types:
'bullet'
'decimal'
'alpha'
Default
'bullet'

ListItem

children
Item contents to render.
Type
React.ReactNode