List Style Type

Utilities for controlling the style of a list.

React props	CSS Properties
`listStyleType={type}`	`list-style-type: {type};`

Usage

To create custom lists, use the listStyleType={type} utilities.

listStyleType=disc

Lorem ipsum dolor sit amet, consectetur adipisicing elit
Assumenda, quia temporibus eveniet a libero incidunt suscipit
Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

listStyleType=decimal

Lorem ipsum dolor sit amet, consectetur adipisicing elit
Assumenda, quia temporibus eveniet a libero incidunt suscipit
Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

listStyleType=circle

Lorem ipsum dolor sit amet, consectetur adipisicing elit
Assumenda, quia temporibus eveniet a libero incidunt suscipit
Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

listStyleType=square

Lorem ipsum dolor sit amet, consectetur adipisicing elit
Assumenda, quia temporibus eveniet a libero incidunt suscipit
Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

listStyleType=none

Lorem ipsum dolor sit amet, consectetur adipisicing elit
Assumenda, quia temporibus eveniet a libero incidunt suscipit
Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

<x.ul listStyleType="disc">
  <li>Lorem ipsum ...</li>
</x.ul>
<x.ul listStyleType="decimal">
  <li>Lorem ipsum ...</li>
</x.ul>
<x.ul listStyleType="circle">
  <li>Lorem ipsum ...</li>
</x.ul>
<x.ul listStyleType="square">
  <li>Lorem ipsum ...</li>
</x.ul>
<x.ul listStyleType="none">
  <li>Lorem ipsum ...</li>
</x.ul>

Responsive

To control the space between elements at a specific breakpoint, use responsive object notation. For example, adding the property listStyleType={{ md: "disc" }} to an element would apply the listStyleType="disc" utility at medium screen sizes and above.

<x.div listStyleType={{ md: 'disc' }}>{/* ... */}</x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub