Dialtone

Lists

Utilities for controlling list styling.

Classes

ClassOutput
.d-ls-reset margin: 0;
padding: 0;
list-style: none !important;
.d-ls-nonelist-style: none !important;
.d-lst-nonelist-style-type: none !important;
.d-lst-disclist-style-type: disc !important;
.d-lst-circlelist-style-type: circle !important;
.d-lst-contentlist-style-type: var(--ls-content) !important;
.d-lst-decimallist-style-type: decimal !important;
.d-lst-unsetlist-style-type: unset !important;

Resetting a list

Use d-ls-reset to reset the margin, padding, and list-style-type of a list. Reseting a list applies to the parent ol or ul, any child li elements, and any child ol or ul elements.

<ul class="d-ls-reset">
  <li>...</li>
  <li>
    <ol>
      <li>...</li>
      <li>...</li>
    </ol>
  </li>
  <li>...</li>
</ul>

Changing the list style type

Use d-ls-{disc|decimal} to change an unordered list's bullet styling.

<ul class="d-lst-disc">
  <li>...</li>
  <li>
    <ul class="d-lst-circle">
      <li>...</li>
      <li>...</li>
    </ul>
  </li>
  <li>
    <ul>
      <li class="d-lst-content" style="--ls-content: '✅'">...</li>
      <li class="d-lst-content" style="--ls-content: '❌'">...</li>
    </ul>
  </li>
</ul>
Last Updated: