Item List (Listas)

Revisa y prueba el componente en código

Observa los componentes y sus propiedades para adaptarlos a tus necesidades específicas.

Listas de ítems y acciones.

Esta pieza todavía no tiene story dedicada en el Storybook actual. La documentación de abajo muestra la estructura esperada para una lista de items con texto, metadatos y acciones.

Básico

<ul class="cl-item-list" role="list">
  <li class="cl-item-list__item">
    <a class="cl-item-list__link" href="#">
      <span class="cl-item-list__label">Trámite pendiente</span>
    </a>
  </li>
  <li class="cl-item-list__item">
    <a class="cl-item-list__link" href="#">
      <span class="cl-item-list__label">Solicitud enviada</span>
    </a>
  </li>
</ul>

Con metadatos

<ul class="cl-item-list" role="list">
  <li class="cl-item-list__item">
    <a class="cl-item-list__link" href="#">
      <span class="cl-item-list__label">Trámite pendiente</span>
      <span class="cl-item-list__meta">Actualizado hoy</span>
    </a>
  </li>
</ul>

Con acciones

<ul class="cl-item-list" role="list">
  <li class="cl-item-list__item">
    <span class="cl-item-list__label">Solicitud enviada</span>
    <button class="cl-button cl-button--tertiary cl-button--sm" type="button">Ver detalle</button>
  </li>
</ul>