List Style Type

Utility	Properties
Error: 429

This example showcases various list-style-types utilities:

• The circle style marks list items with hollow circles.
• The disc style marks list items with solid circles (default for unordered lists).
• The square style marks list items with solid squares.

• Butter 🧈
• Egg 🥚
• Milk 🥛

<div class="bg-indigo-1 p-4 rad-1">
  <ul class="bg-white lsp-o lst-c p-4 pl-6 rad-1">
    <li class="tc-lead">Butter 🧈</li>
    <li class="tc-lead">Egg 🥚</li>
    <li class="tc-lead">Milk 🥛</li>
  </ul>
</div>

Disc

Initial value

This example sets the list style type to disc. The list items will be marked with solid circles, which is the default style for unordered lists.

• Butter 🧈
• Egg 🥚
• Milk 🥛

<div class="bg-indigo-1 p-4 rad-1">
  <ul class="bg-white lsp-o lst-d p-4 pl-6 rad-1">
    <li class="tc-lead">Butter 🧈</li>
    <li class="tc-lead">Egg 🥚</li>
    <li class="tc-lead">Milk 🥛</li>
  </ul>
</div>

Square

This example sets the list style type to square. The list items will be marked with solid squares, providing a different visual style for the list.

• Butter 🧈
• Egg 🥚
• Milk 🥛

<div class="bg-indigo-1 p-4 rad-1">
  <ul class="bg-white lsp-o lst-s p-4 pl-6 rad-1">
    <li class="tc-lead">Butter 🧈</li>
    <li class="tc-lead">Egg 🥚</li>
    <li class="tc-lead">Milk 🥛</li>
  </ul>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Media modifier

You can combine responsive breakpoints like sm:-*,md:-*, lg:-*, and xxl:-* allows targeting specific utilities in different viewports.

<div class="lst-d md:lst-s ..."></div>

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.

<div class="lst-d h:lst-s ..."></div>