Typography

List Style Position

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

Basic usage

Setting the list style position

Control the position of the markers and text indentation in a list using the list-inside and list-outside utilities.

list-inside

  • 5 cups chopped Porcini mushrooms
  • 1/2 cup of olive oil
  • 3lb of celery

list-outside

  • 5 cups chopped Porcini mushrooms
  • 1/2 cup of olive oil
  • 3lb of celery
<ul className="list-inside ...">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

<ul className="list-outside ...">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>