Skip to content
Sunsetting Yumma CSS Intellisense extension 👋

List Style Type

Controls the style of a list.

Class 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.

  • Apples
  • Bananas
  • Cherries
<div class="bg-l-indigo-6 p-4 rad-1">
<ul class="bg-white lsp-o lst-c p-4 pl-6 rad-1">
<li class="tc-lead">Apples</li>
<li class="tc-lead">Bananas</li>
<li class="tc-lead">Cherries</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.

  • Apples
  • Bananas
  • Cherries
<div class="bg-l-indigo-6 p-4 rad-1">
<ul class="bg-white lsp-o lst-d p-4 pl-6 rad-1">
<li class="tc-lead">Apples</li>
<li class="tc-lead">Bananas</li>
<li class="tc-lead">Cherries</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.

  • Apples
  • Bananas
  • Cherries
<div class="bg-l-indigo-6 p-4 rad-1">
<ul class="bg-white lsp-o lst-s p-4 pl-6 rad-1">
<li class="tc-lead">Apples</li>
<li class="tc-lead">Bananas</li>
<li class="tc-lead">Cherries</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>