List

Las listas consisten en contenido, ya sea texto o imagen, agrupado y organizado verticalmente.

Variaciones y tipos

Diferenciamos dos tipos: Basic y Icon

Basic

Consiste en un única columna de contenidos con un item por fila.

Demo en vivo

<ul style="margin-bottom: 2rem;">
  <li class="rds-list-item">
    <a href="#" class="rds-list-item__link">Item</a>
  </li>
  <li class="rds-list-item">
    <a href="#" class="rds-list-item__link">Item</a>
  </li>
  <li class="rds-list-item">
    <a href="#" class="rds-list-item__link rds-list-item__link--disabled">Disabled item</a>
  </li>
</ul>
<ul style="margin-bottom: 2rem;">
  <li class="rds-list-item rds-list-item--s">
    <a href="#" class="rds-list-item__link">Item</a>
  </li>
  <li class="rds-list-item rds-list-item--s">
    <a href="#" class="rds-list-item__link">Item</a>
  </li>
  <li class="rds-list-item rds-list-item--s">
    <a href="#" class="rds-list-item__link">Item</a>
  </li>
</ul>

Icon

Todos los items de las filas tienen un icono a la izquierda que ayuda a la comprensión del funcionamiento del componente.

Demo en vivo

<ul style="margin-bottom: 2rem;">
  <li class="rds-list-item">
    <a href="#" class="rds-list-item__link"><span class="rds-list-item__icon rds-icon-Arrow_down" aria-hidden="true"></span>Item</a>
  </li>
  <li class="rds-list-item">
    <a href="#" class="rds-list-item__link"><span class="rds-list-item__icon rds-icon-Arrow_down" aria-hidden="true"></span>Item</a>
  </li>
  <li class="rds-list-item">
    <a href="#" class="rds-list-item__link rds-list-item__link--disabled"><span class="rds-list-item__icon rds-icon-Arrow_down" aria-hidden="true"></span>Disabled item</a>
  </li>
</ul>
<ul style="margin-bottom: 2rem;">
  <li class="rds-list-item rds-list-item--s">
    <a href="#" class="rds-list-item__link"><span class="rds-list-item__icon rds-icon-Arrow_down" aria-hidden="true"></span>Item</a>
  </li>
  <li class="rds-list-item rds-list-item--s">
    <a href="#" class="rds-list-item__link"><span class="rds-list-item__icon rds-icon-Arrow_down" aria-hidden="true"></span>Item</a>
  </li>
  <li class="rds-list-item rds-list-item--s">
    <a href="#" class="rds-list-item__link"><span class="rds-list-item__icon rds-icon-Arrow_down" aria-hidden="true"></span>Item</a>
  </li>
</ul>

Comportamiento

Las listas deben cumplir unos principios básicos en su comportamiento:

  • Lógico
    Las listas deben ordenarse de manera lógica para facilitar la lectura del contenido; como en orden alfabético, numérico, cronológico o por preferencia del usuario.
  • Práctico
    Las listas presentan el contenido de tal forma que facilitan el identificar un elemento específico en un conjunto y actuar sobre él.
  • Coherente
    Deben presentar iconos, texto y acciones en un formato uniforme.