Lists

Listas

Actualizado el 24/10/2024

Listas ordenadas

Las listas ordenadas tiene como objetivo enumerar una serie de elementos que están relacionados entre si mediante una secuencia concreta (por ejemplo, el temario de una asignatura).

  1. Item 1
  2. Item 2 con más texto
  3. Item 3 con más texto que el item 2
<> Código
× Ocultar Código
  • HTML
  • JS
<ol class="ulpgcds-list">
     <li>Item 1</li>
     <li>Item 2 con más texto</li>
     <li>Item 3 con más texto que el item 2</li>
</ol>  

Listas desordenadas

Las listas desordenadas organizan los elementos mediante un icono o símbolo e indexan elementos que no cuentan con una secuencia clara (por ejemplo, un listado de asignaturas). 

  • Item 1
  • Item 2 con más texto
  • Item 3 con más texto que el item 2
<> Código
× Ocultar Código
  • HTML
  • JS
<ul class="ulpgcds-list">
     <li>Item 1</li>
     <li>Item 2 con más texto</li>
     <li>Item 3 con más texto que el item 2</li>
</ul> 

Listas con enlaces

Las listas con enlaces tendrán el mismo estilo que las listas pero aplicando además los estilos relativos a los enlaces.

<> Código
× Ocultar Código
  • HTML
  • JS
<ul class="ulpgcds-list">
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2 con más texto</a></li>
     <li><a href="#">Item 3 con más texto que el item 2</a></li>
</ul> 

Listas anidadas

Las listas anidadas son aquellas listas de elementos que, a su vez, poseen listas de elementos en su interior, pudiendo ser numeradas o no.

  • Item 1
  • Item 2 con más texto
    • Elemento sublista 1
    • Elemento sublista 2
      • Elemento sublista interior
      • Elemento sublista interior 2
    • Elemento sublista 3
  • Item 3 con más texto que el item 2
<> Código
× Ocultar Código
  • HTML
  • JS
<ul class="ulpgcds-list">
    <li>Item 1</li>
    <li>Item 2 con más texto
              <ul>
                   <li>Elemento sublista 1</li>
                   <li>Elemento sublista 2
                         <ul>
                               <li>Elemento sublista interior</li>
                               <li>Elemento sublista interior 2</li>
                         </ul>
                   </li>              
                   <li>Elemento sublista 3</li>         
              </ul>
        </li>
    <li>Item 3 con más texto que el item 2</li>
</ul>
 

Uso del componente

Entendemos como “Lista” cualquier indexación vertical continua de textos o imágenes. Estas son un componente básico y fundamental del cualquier sitio web, ya que, permiten organizar cualquier tipo de información en elementos individuales y relacionados bajo una mismo concepto.

Dentro de las listas como elemento HTML se pude distinguir entre dos grupos: Listas ordenadas (ol) y listas desordenadas (ul)

Estado del componente
Estable