List

List Style Type

Use the listStyleType property to set the type of the list marker.

<Box as="ul" listStyleType="circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</Box>

Prop	CSS Property	Token Category
listStyleType	list-style-type	-

List Style Position

Use the listStylePosition property to set the position of the list marker.

<Box as="ul" listStylePosition="inside">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</Box>

Prop	CSS Property	Token Category
listStylePosition	list-style-position	-

List Style Image

Use the listStyleImage property to set the image of the list marker.

<Box as="ul" listStyleImage="url(...)">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</Box>

Prop	CSS Property	Token Category
listStyleImage	list-style-image	assets

Markers

Use the _marker property to set the marker of a list item.

<ul>
  <Box as="li" _marker={{ color: "red" }}>
    Item 1
  </Box>
  <Box as="li" _marker={{ color: "blue" }}>
    Item 2
  </Box>
  <Box as="li" _marker={{ color: "green" }}>
    Item 3
  </Box>
</ul>