Lists

Normal list

<ul class="normal">
    <li>Normal list</li>
    <li>With disc style type</li>
</ul>

<ol class="normal">
    <li>Normal ordered list</li>
    <li>With decimal style type</li>
</ol>

Nested

<ul class="nestedlist">
    <li>First element
        <ul>
            <li>Sub list</li>
        </ul>
    </li>
    <li>Second element</li>
</ul>

<div class="nestedlist">
    Paragraph
    <ul>
        <li>Sub list</li>
    </ul>
</div>

A list

A list adds margin bottom, and padding bottom (logical properties) to every list item, defined by @list-spacing, the quickest way to place items in a list.

<ul class="alist">
    <li>A list item</li>
    <li>A list item</li>
    <li>A list item</li>
    <li>A list item</li>
</ul>

Bordered list

A list with border bottom (logical property) added for every list item, color of which is defined by @rowlist-border.

<ul class="blist">
    <li>A list item</li>
    <li>A list item</li>
    <li>A list item</li>
    <li>A list item</li>
</ul>

Row list

A list, and bordered list, combined.

<ul class="rowlist">
    <li>A list item</li>
    <li>A list item</li>
    <li>A list item</li>
    <li>A list item</li>
</ul>

Bonus: comma list

A list of items, comma seperated, inline.

<ul class="commalist">
    <li>A list item</li>
    <li>A list item</li>
    <li>A list item</li>
    <li>A list item</li>
</ul>