List Style Position

Utilities for controlling the position of bullets/numbers in lists.

Usage

Control the position of the markers in a list using the listStylePosition="inside" and listStylePosition="outside" utilities.

<x.ul listStylePosition="inside">
  <li>Lorem ipsum ...</li>
</x.div>
<x.ul listStylePosition="outside">
  <li>Lorem ipsum ...</li>
</x.div>

Responsive

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

<x.ul listStylePosition={{ md: 'inside' }}>{/* ... */}</x.ul>

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