List style type

Utilities for controlling the bullet/number style of a list


Class reference

ClassProperties
list-nonelist-style-type: none;
list-disclist-style-type: disc;
list-decimallist-style-type: decimal;
list-asterixlist-style-type: "*";
list-circlelist-style-type: circle;
list-decimal-leading-zerolist-style-type: decimal-leading-zero;
list-lower-latinlist-style-type: lower-latin;
list-lower-romanlist-style-type: lower-roman;
list-upper-latinlist-style-type: upper-latin;
list-upper-romanlist-style-type: upper-roman;

# Usage

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

.list-none (default)

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Assumenda, quia temporibus eveniet a libero incidunt suscipit
  • Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

.list-asterix

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Assumenda, quia temporibus eveniet a libero incidunt suscipit
  • Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

.list-disc

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Assumenda, quia temporibus eveniet a libero incidunt suscipit
  • Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

.list-circle

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Assumenda, quia temporibus eveniet a libero incidunt suscipit
  • Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

.list-decimal

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
  2. Assumenda, quia temporibus eveniet a libero incidunt suscipit
  3. Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

.list-decimal-leading-zero

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
  2. Assumenda, quia temporibus eveniet a libero incidunt suscipit
  3. Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

.list-lower-latin

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
  2. Assumenda, quia temporibus eveniet a libero incidunt suscipit
  3. Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

.list-lower-roman

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
  2. Assumenda, quia temporibus eveniet a libero incidunt suscipit
  3. Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

.list-upper-latin

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
  2. Assumenda, quia temporibus eveniet a libero incidunt suscipit
  3. Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

.list-upper-roman

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
  2. Assumenda, quia temporibus eveniet a libero incidunt suscipit
  3. Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
<!-- None (default) -->
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>
<!-- Asterix -->
<ul class="list-asterix">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>
<!-- Disc -->
<ul class="list-disc">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>
<!-- Circle -->
<ul class="list-circle">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>
<!-- Decimal -->
<ol class="list-decimal">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
<!-- Decimal leading zero -->
<ol class="list-decimal-leading-zero">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
<!-- Lower latin -->
<ol class="list-lower-latin">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
<!-- Lower roman -->
<ol class="list-lower-roman">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
<!-- Upper latin -->
<ol class="list-upper-latin">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
<!-- Upper roman -->
<ol class="list-upper-roman">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
Using .markdown can override the list style classes

# Responsive

To control the list style type of a list element at a specific breakpoint, add a {screen}: prefix to any existing list utility. For example, use .md:list-disc to apply the list-disc utility at only medium screen sizes and above.

<ul class="list-none **md:list-disc**">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>Assumenda, quia temporibus eveniet a libero incidunt suscipit</li>
<li>Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</li>
</ul>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.