Listas

Estilos por defecto para listas en cuerpo de texto.

Contenido

Listas por defecto

Por defecto, se aplican los estilos tanto a las listas ul como a las listas ol.

Listas por defecto

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
      • Facilisis in pretium nisl aliquet
      • Nulla volutpat aliquam velit
      • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
    1. Facilisis in pretium nisl aliquet
    2. Nulla volutpat aliquam velit
    3. Phasellus iaculis neque
  4. Purus sodales ultricies
  5. Vestibulum laoreet porttitor sem
<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>

Lista sin estilos

La clase .list--unstyled elimina el padding y el list-style.

Lista sin estilos

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Consectetur adipiscing elit
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
<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>

Listas inline

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.

Lista inline

  • Lorem ipsum
  • Consectetur
  • Integer molestie
<ul class="list--inline">
  <li>Lorem ipsum</li>
  <li>Consectetur</li>
  <li>Integer molestie</li>
</ul>

Lista inline con separadores

  • Lorem ipsum
  • Consectetur
  • Integer molestie
<ul class="list--inline list--inline--separators">
  <li>Lorem ipsum</li>
  <li>Consectetur</li>
  <li>Integer molestie</li>
</ul>

Listas compactas

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.

Lista compacta

  • Lorem ipsum
  • Consectetur
  • Integer molestie
<ul class="list--compact">
  <li>Lorem ipsum</li>
  <li>Consectetur</li>
  <li>Integer molestie</li>
</ul>
Subir