Listas

Las listas son índices verticales continuos de texto, imágenes o ambos.

Las listas en la interfaz para un usuario se utilizan para organizar y presentar contenido de manera estructurada y legible. Proporcionan una forma eficiente de mostrar información, permiten la selección y la interacción con elementos individuales, y facilitan la navegación y el filtrado.

Las listas mejoran la accesibilidad, la escaneabilidad y la comprensión del contenido presentado en la interfaz.

Estas son algunas de las características y funcionalidades clave de las listas:

  • Organización: Las listas se utilizan para organizar y presentar contenido de manera ordenada y estructurada. Pueden mostrar elementos relacionados en una secuencia lógica o en grupos temáticos, lo que facilita la comprensión y navegación del contenido.

  • Visualización:Las listas permiten mostrar información de manera concisa y legible. Cada elemento de la lista puede contener texto, imágenes u otros elementos visuales que proporcionen detalles o descripciones breves.

  • Accesibilidad: Las listas se diseñan para ser escaneables y accesibles, lo que significa que los usuarios pueden examinar rápidamente los elementos de la lista y encontrar información relevante de manera eficiente. La estructura visual de la lista ayuda a los usuarios a identificar rápidamente los elementos que les interesan.

  • Interacción: Las listas pueden ser interactivas y permitir que los usuarios seleccionen elementos individuales. Pueden proporcionar retroalimentación visual cuando un elemento se selecciona, lo que indica la interacción exitosa.

  • Navegación: Las listas a menudo se utilizan para la navegación, donde cada elemento de la lista actúa como un enlace a una página o sección específica. Los usuarios pueden hacer clic o tocar en un elemento de la lista para acceder a más detalles o contenido relacionado.

  • Filtrado: Las listas pueden permitir que los usuarios filtren o clasifiquen los elementos según sus preferencias o necesidades. Esto les permite encontrar rápidamente los elementos relevantes o personalizar la visualización de la lista según sus criterios.

Lista Simple

  • Título del ítem
  • Título del ítem
  • Título del ítem
  • Título del ítem
  • Título del ítem
  • Docentes
  • Alumni

HTML

<ul class="listas">
<li class="item-simple">
<span class="cuerpo-horizontal">
<img src="iconos/archivo_lineal.svg" alt="" width="32" height="32">
Título del ítem </span>
<img src="iconos/derecha_lineal.svg" alt="" width="32" height="32">
</li>
<li class="item-simple">
<span class="cuerpo-horizontal">
<img src="iconos/archivo_lineal.svg" alt="" width="32" height="32">Título del ítem </span>
</li>
<li class="item-simple">
Título del ítem <img src="iconos/derecha_lineal.svg" alt="" width="32" height="32">
</li>
</ul>

CSS

ul.listas .item-simple {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
padding: 15px 20px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
height: 56px;
min-width: 280px;
max-width: 320px;
background: #FFFFFF;
mix-blend-mode: normal;
border-bottom: 1px solid rgba(0, 40, 70, 0.3);
}

ul.listas .item-simple .cuerpo-horizontal {
display: flex;
gap: 10px;
align-items: center;
}

JS

Lista con Item con descriptor

  • Título del ítem

    Detalle o complemento del item Detalle o complemento del item

  • Título del ítem

    Detalle o complemento del item Detalle o complemento del item

  • Título del ítem

    Detalle o complemento del item

  • Título del ítem

    Detalle o complemento del item

  • Docentes

    Un espacio para gestionar todas tus clases, registro de notas, solicitudes, etc.

  • Alumnos

    Zona donde puedes acceder a tus notas, reportes y otras funciones para ti

HTML

<ul class="listas">
<li class="item-doble">
<span class="cuerpo-horizontal">
<img src="iconos/archivo_lineal.svg" alt="" width="32" height="32">
<span class="cuerpo-vertical">
<h4>Docentes</h4>
<p class="p-1-linea">Un espacio para gestionar todas tus clases, registro de notas, solicitudes, etc.</p>
</span>
</span>
<img src="iconos/Ver_mas_horizontal_lineal.svg" alt="" width="32" height="32">
</li>
<li class="item-doble">
<span class="cuerpo-horizontal">
<img src="iconos/archivo_lineal.svg" alt="" width="32" height="32">
<span class="cuerpo-vertical">
<h4>Alumnos</h4>
<p class="p-1-linea">Zona donde puedes acceder a tus notas, reportes y otras funciones para ti</p>
</span>
</span>
<img src="iconos/Ver_mas_horizontal_lineal.svg" alt="" width="32" height="32">
</li>
<li class="item-doble">
<span class="cuerpo-horizontal">
<img src="iconos/archivo_lineal.svg" alt="" width="32" height="32">
<span class="cuerpo-vertical">
<h4>Otros</h4>
<p class="p-1-linea">Zona donde puedes acceder a tus notas, reportes y otras funciones para ti</p>
</span>
</span>
<img src="iconos/Ver_mas_horizontal_lineal.svg" alt="" width="32" height="32">
</li>
</ul>

CSS

ul.listas .item-doble {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
padding: 12px 20px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
min-width: 400px;
max-width: 400px;
background: #FFFFFF;
mix-blend-mode: normal;
border-bottom: 1px solid rgba(0, 40, 70, 0.3);
}

ul.listas .item-doble .cuerpo-horizontal {
display: flex;
gap: 10px;
align-items: center;
}

ul.listas .item-doble .cuerpo-vertical {
display: flex;
flex-direction: column;
gap: 0px;
align-items: flex-start;
}

ul.listas .item-doble .cuerpo-vertical h4 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
}

ul.listas .item-doble .cuerpo-vertical p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 20px;
color: #024588;
max-width: 200px;
}

ul.listas .item-doble .cuerpo-vertical .p-1-linea {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

ul.listas .item-doble .cuerpo-vertical .p-extenso {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 20px;
color: #024588;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

JS

Lista con Item con descriptor extenso

  • Título del ítem

    Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.

  • Título del ítem

    Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.

  • Título del ítem

    Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.

  • Título del ítem

    Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.

  • Docentes

    Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.

  • Alumnos

    Zona donde puedes acceder a tus notas, reportes y otras funciones para ti

HTML

<ul class="listas">
<li class="item-doble">
<span class="cuerpo-horizontal">
<img src="iconos/cookies_lineal-1.svg" alt="" width="32" height="32">
<span class="cuerpo-vertical">
<h4>Docentes</h4>
<p class="p-extenso">Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.</p>
</span>
</span>
<img src="iconos/Ver_mas_horizontal_lineal.svg" alt="" width="32" height="32">
</li>
<li class="item-doble">
<span class="cuerpo-horizontal">
<img src="iconos/pagar_tarjeta_lineal.svg" alt="" width="32" height="32">
<span class="cuerpo-vertical">
<h4>Alumnos</h4>
<p class="p-extenso">Zona donde puedes acceder a tus notas, reportes y otras funciones para ti</p>
</span>
</span>
<img src="iconos/Ver_mas_horizontal_lineal.svg" alt="" width="32" height="32">
</li>
</ul>

CSS

ul.listas .item-doble {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
padding: 12px 20px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
min-width: 400px;
max-width: 400px;
background: #FFFFFF;
mix-blend-mode: normal;
border-bottom: 1px solid rgba(0, 40, 70, 0.3);
}

ul.listas .item-doble .cuerpo-horizontal {
display: flex;
gap: 10px;
align-items: center;
}

ul.listas .item-doble .cuerpo-vertical {
display: flex;
flex-direction: column;
gap: 0px;
align-items: flex-start;
}

ul.listas .item-doble .cuerpo-vertical h4 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
}

ul.listas .item-doble .cuerpo-vertical p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 20px;
color: #024588;
max-width: 200px;
}

ul.listas .item-doble .cuerpo-vertical .p-1-linea {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

ul.listas .item-doble .cuerpo-vertical .p-extenso {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 20px;
color: #024588;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

JS

Lista con Item completo imagen cuadrada

  • Título del ítem

  • Título del ítem

  • Título del ítem

    Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.

  • Título del ítem

    Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.

  • Título del ítem

    Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.

  • Título del ítem

    Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.

HTML

<ul class="listas">
<li class="item-doble">
<span class="cuerpo-horizontal">
<img src="iconos/imagen-lista.svg" alt="" width="80" height="80">
<span class="cuerpo-vertical">
<h4>Título del ítem</h4>
<p class="p-extenso">Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.</p>
</span>
</span>
<img src="iconos/Ver_mas_horizontal_lineal.svg" alt="" width="32" height="32">
</li>
<li class="item-doble">
<span class="cuerpo-horizontal">
<img src="iconos/imagen-lista.svg" alt="" width="80" height="80">
<span class="cuerpo-vertical">
<h4>Título del ítem</h4>
<p class="p-extenso">Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.</p>
</span>
</span>
<img src="iconos/Ver_mas_horizontal_lineal.svg" alt="" width="32" height="32">
</li>
</ul>

CSS

ul.listas .item-doble {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
padding: 12px 20px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
min-width: 400px;
max-width: 400px;
background: #FFFFFF;
mix-blend-mode: normal;
border-bottom: 1px solid rgba(0, 40, 70, 0.3);
}

ul.listas .item-doble .cuerpo-horizontal {
display: flex;
gap: 10px;
align-items: center;
}

ul.listas .item-doble .cuerpo-vertical {
display: flex;
flex-direction: column;
gap: 0px;
align-items: flex-start;
}

ul.listas .item-doble .cuerpo-vertical h4 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
}

ul.listas .item-doble .cuerpo-vertical p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 20px;
color: #024588;
max-width: 200px;
}

ul.listas .item-doble .cuerpo-vertical .p-1-linea {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

ul.listas .item-doble .cuerpo-vertical .p-extenso {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 20px;
color: #024588;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

JS

Lista con Item completo imagen redonda

  • Título del ítem

  • Título del ítem

  • Título del ítem

    Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.

  • Título del ítem

    Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.

  • Título del ítem

    Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.

  • Título del ítem

    Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.

HTML

<ul class="listas">
<li class="item-doble">
<span class="cuerpo-horizontal">
<img src="iconos/imagen-lista.svg" alt="" width="80" height="80">
<span class="cuerpo-vertical">
<h4>Título del ítem</h4>
<p class="p-extenso">Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.</p>
</span>
</span>
<img src="iconos/Ver_mas_horizontal_lineal.svg" alt="" width="32" height="32">
</li>
<li class="item-doble">
<span class="cuerpo-horizontal">
<img src="iconos/imagen-lista.svg" alt="" width="80" height="80">
<span class="cuerpo-vertical">
<h4>Título del ítem</h4>
<p class="p-extenso">Detalle o complemento del item con dos lineas de textos lorem ipsum dolor sit amet, consectetur.</p>
</span>
</span>
<img src="iconos/Ver_mas_horizontal_lineal.svg" alt="" width="32" height="32">
</li>
</ul>

CSS

ul.listas .item-doble {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
padding: 12px 20px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
min-width: 400px;
max-width: 400px;
background: #FFFFFF;
mix-blend-mode: normal;
border-bottom: 1px solid rgba(0, 40, 70, 0.3);
}

ul.listas .item-doble .cuerpo-horizontal {
display: flex;
gap: 10px;
align-items: center;
}

ul.listas .item-doble .cuerpo-vertical {
display: flex;
flex-direction: column;
gap: 0px;
align-items: flex-start;
}

ul.listas .item-doble .cuerpo-vertical h4 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
}

ul.listas .item-doble .cuerpo-vertical p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 20px;
color: #024588;
max-width: 200px;
}

ul.listas .item-doble .cuerpo-vertical .p-1-linea {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

ul.listas .item-doble .cuerpo-vertical .p-extenso {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 20px;
color: #024588;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

JS

Listas

Código copiado al portapapeles