Components

List(React)

Styling lists with bullets, numbers, or letters.

Version:0.7.2 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react --exact
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>

Number

  1. item one
  2. item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  3. 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>

Lower alpha

  1. item one
  2. item two ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  3. 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>

Props

List

  • children

    List items to render. Should be instances of ListItem.

    Type
    node
    Default
    undefined
  • theme

    Controls the theme of the markers applied to each list item.

    Type
    oneOf([
      'bullet',
      'decimal',
      'alpha',
    ]);
    Default
    'bullet'

ListItem

  • children

    Item contents to render.

    Type
    node
    Default
    undefined