Estilos por defecto para listas en cuerpo de texto.
Por defecto, se aplican los estilos tanto a las listas ul como a las listas ol.
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa
<ul>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Phasellus iaculis neque
<ul>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Phasellus iaculis neque</li>
</ul>
</li>
</ul>
</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa
<ol>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Phasellus iaculis neque</li>
</ol>
</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
</ol>
La clase .list--unstyled elimina el padding y el list-style.
<ul class="list--unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Consectetur adipiscing elit
<ul>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Phasellus iaculis neque</li>
</ul>
</li>
</ul>La clase .list--inline coloca todos los elementos en una misma línea, con padding entre ellos. Usando la clase .list--inline--separators al elemento ul se añaden separadores entre los elementos.
<ul class="list--inline">
<li>Lorem ipsum</li>
<li>Consectetur</li>
<li>Integer molestie</li>
</ul><ul class="list--inline list--inline--separators">
<li>Lorem ipsum</li>
<li>Consectetur</li>
<li>Integer molestie</li>
</ul>
La clase .list--compact elimina los margins existentes entre elementos de la lista, de esta forma hacemos que se muestren estéticamente como una lista por defecto pero menos espacio entre sus elementos.
<ul class="list--compact">
<li>Lorem ipsum</li>
<li>Consectetur</li>
<li>Integer molestie</li>
</ul>