Utilities for controlling list styling.
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>An unordered list item</li> <li> An unordered list item <ol> <li>A nested ordered list item</li> <li>A nested ordered list item</li> </ol> </li> <li>An unordered list item</li> <li> An unordered list item <ul> <li>A nested unordered list item</li> <li>A nested unordered list item</li> </ul> </li> </ul>
Use d-lst-{none|disc|circle|decimal|content|none} to change a list item's bullet styling.
<dt-stack gap="100"> <p>Paragraph of text.</p> <ul class="d-pis-200"> <li class="d-lst-disc"><strong>disc</strong> list item</li> <li class="d-lst-circle"><strong>circle</strong> list item</li> <li class="d-lst-decimal"><strong>decimal</strong> list item</li> <li class="d-lst-content" style="--ls-content: '🫠'"><strong>content</strong> list item</li> <li class="d-lst-none"><strong>none</strong> list item</li> </ul> <p>Paragraph of text.</p> <ul class="d-pis-200"> <li class="d-lst-disc"> An unordered list item <ul class="d-pis-200"> <li class="d-lst-circle">A nested unordered list item</li> <li class="d-lst-circle">A nested unordered list item</li> </ul> </li> <li class="d-lst-disc"> An unordered list item <ul class="d-pis-200"> <li class="d-pis-100 d-lst-content" style="--ls-content: '✅'">A nested unordered list item</li> <li class="d-pis-100 d-lst-content" style="--ls-content: '❌'">A nested unordered list item</li> </ul> </li> </ul> </dt-stack>
Use the start attribute for an <ol> to set its starting number.
<dt-stack gap="100"> <p>Paragraph of text.</p> <ol class="d-pis-300"> <li class="d-lst-decimal">Decimal list item</li> <li class="d-lst-decimal">Decimal list item</li> <li class="d-lst-decimal">Decimal list item</li> </ol> <p>Paragraph of text. The list below starts at 4.</p> <ol class="d-pis-300" start="4"> <li class="d-lst-decimal">Decimal list item</li> <li class="d-lst-decimal">Decimal list item</li> <li class="d-lst-decimal">Decimal list item</li> </ol> </dt-stack>
Class
|
Output
|
|---|---|
| .d-ls-reset |
margin: 0; padding: 0; list-style: none !important; |
| .d-ls-none | list-style: none !important; |
| .d-lst-none | list-style-type: none !important; |
| .d-lst-disc | list-style-type: disc !important; |
| .d-lst-circle | list-style-type: circle !important; |
| .d-lst-content | list-style-type: var(--ls-content) !important; |
| .d-lst-decimal | list-style-type: decimal !important; |
| .d-lst-unset | list-style-type: unset !important; |
Lists documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope