List

Styling lists with bullets, numbers, or letters

List variations

Bullet

<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

<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

<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
'bullet' | 'decimal' | 'alpha'
Default
'bullet'

ListItem

children
Item contents to render.

Type
React.ReactNode