Item de estado

Bloque con listas de descripción o etiquetas, además de información del estado de las aportaciones realizadas. Generalmente utilizado en formularios.

Índice de apartados de esta página

• Anatomía
• Estados
• Variantes
• Accesibilidad

Anatomía #

1. Borde de error: Grosor de 4 px y color alert-base a la izquierda del contenedor cuando hay un estado de error. Lo acompaña un mensaje de error.
2. Título: Encabeza el contenido que se muestra.
3. Subtítulo opcional: A veces es necesario un texto secundario en color neutral-dark que describa brevemente el contenido. También puede incluirse un enlace a un modelo adjunto u otros contenidos relevantes.
4. Items: Cada término se encuentra asociado a una definición. Por ejemplo, para visualizar bloques de datos aportados, como nombre o dirección. Dependiendo de su naturaleza puede sustituirse por una etiqueta de título, una pista de los datos a introducir o enlaces a documentos.
5. Mensaje de error: Indica problema en la carga de datos o en la introducción de los mismos.
6. Botones: Uno o varios botones que permiten la aportación, modificación o consulta de datos y documentos por parte del usuario.
7. Estado: Subcomponente que muestra al usuario en qué situación se encuentra la aportación: incompleto, cargando, completado y error. Cada uno está acompañado de un icono como apoyo a la etiqueta de texto.

Estados #

El subcomponente estado distingue entre las variantes: éxito en la subida, aportaciones incompletas, porcentaje de carga, error en la carga y aviso de consideraciones a tener en cuenta.

Variantes #

Por defecto #

Apariencia del bloque para los estados de subiendo, éxito y atención.

Alerta #

Apariencia del bloque para los estados de incompleto y error. Se marca con una línea de alerta roja en su borde izquierdo.

Accesibilidad #

Cómo funciona #

• Contenedor con un id único y una lista <dl> de términos <dt> y definiciones <dd>.
• Los iconos de estado tienen el parámetro aria-hidden=true por defecto, por lo que el texto que les acompaña debe describir claramente el estado.
• Se puede utilizar el componente como un caller para anidar contenido como botones de acciones. Cada botón debe tener un <span> con .sr-only que extienda la descripción de la acción.