List Style Type

Utility	Properties
lst-c	list-style-type: circle;
lst-d	list-style-type: disc;
lst-s	list-style-type: square;

Circle

This example sets the list style type to circle. The list items will be marked with hollow circles.

• 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

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 modifiers

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

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

Hover modifiers

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

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