List style type

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";

export const title = "list-style-type"; export const description = "Utilities for controlling the marker style of a list.";

)", "list-style-type: var(\);"], ["list-[\]", "list-style-type: \;"], ]} />

Examples

Basic example

Use utilities like list-disc and list-decimal to control the style of the markers in a list:

{

list-disc

• Now this is a story all about how, my life got flipped-turned upside down
• And I'd like to take a minute just sit right there
• 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'd like to take a minute just sit right there
• 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'd like to take a minute just sit right there
• I'll tell you how I became the prince of a town called Bel-Air

}

<!-- [!code classes:list-disc] -->
<ul class="list-disc">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>

<!-- [!code classes:list-decimal] -->
<ol class="list-decimal">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ol>

<!-- [!code classes:list-none] -->
<ul class="list-none">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>

Using a custom value

Responsive design