Typography

List Style Type

Utilities for controlling the bullet/number style of a list.

Basic usage

Setting the list style type

To create bulleted or numeric lists, use the list-disc and list-decimal utilities.

list-disc

Now this is a story all about how, my life got flipped turned upside down
And I like to take a minute and sit right here
I'll tell you how I became the prince of a town called Bel-Air

list-decimal

Now this is a story all about how, my life got flipped turned upside down
And I like to take a minute and sit right here
I'll tell you how I became the prince of a town called Bel-Air

list-none

Now this is a story all about how, my life got flipped turned upside down
And I like to take a minute and sit right here
I'll tell you how I became the prince of a town called Bel-Air

<ul className="**list-disc**">
  <li>Now this is a story all about how, my life got flipped turned upside down</li>
  <!-- ... -->
</ul>

<ol className="**list-decimal**">
  <li>Now this is a story all about how, my life got flipped turned upside down</li>
  <!-- ... -->
</ol>

<ul className="**list-none**">
  <li>Now this is a story all about how, my life got flipped turned upside down</li>
  <!-- ... -->
</ul>