DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Resumen de errores

Avisos

Mensaje de error que aparece al validar los formularios.

Error-summary

Por defecto

Descripción visual

Bloque rectangular con borde rojo de 2-3px y fondo rosa claro. Contiene encabezado en negro y lista de dos elementos en rojo subrayado (enlaces). Texto alineado a la izquierda con espaciado vertical entre elementos.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "El campo de Nombre no puede estar vacío.",
      "href": "#example-error-1"
    },
    {
      "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
      "href": "#example-error-2"
    }
  ]
}) }}

Con encabezado de nivel 3

Descripción visual

Bloque rectangular con borde rojo de 2-3px y fondo rosa claro. Incluye encabezado en negro, subtítulo en negro peso normal, y lista de dos elementos en rojo subrayado (enlaces). Texto alineado a la izquierda con espaciado vertical entre secciones.

Mostrar códigodel ejemplo: Con encabezado de nivel 3

Contenido

Nunjucks macro
{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
{{ componentErrorSummary({
  "titleText": "Título con h3",
  "headingLevel": 3,
  "errorList": [
    {
      "text": "El campo de Nombre no puede estar vacío.",
      "href": "#example-error-1"
    },
    {
      "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
      "href": "#example-error-2"
    }
  ]
}) }}

Sin enlaces

Descripción visual

Bloque rectangular con borde rojo de 2-3px y fondo rosa claro. Contiene encabezado en negro y texto descriptivo en rojo peso normal sin subrayado. Texto alineado a la izquierda con espaciado vertical mínimo.

Mostrar códigodel ejemplo: Sin enlaces

Contenido

Nunjucks macro
{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "Nombre de usuario o contraseña incorrectos."
    }
  ]
}) }}

Con y sin enlaces

Descripción visual

Caja con borde rojo grueso (3-4px) y fondo rosa muy claro. Título en negrita negro. Texto de error principal en rojo negrita. Segunda línea en rojo negrita con subrayado (enlace).

Mostrar códigodel ejemplo: Con y sin enlaces

Contenido

Nunjucks macro
{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "Nombre de usuario o contraseña incorrectos."
    },
    {
      "text": "Acepta los términos del servicio para acceder.",
      "href": "#example-error-1"
    }
  ]
}) }}

Con todo

Descripción visual

Caja con borde rojo grueso (3-4px) y fondo rosa muy claro. Título en negrita negro. Texto informativo en negro regular. Dos líneas de error en rojo negrita, con la segunda línea en rojo negrita con subrayado (enlace).

Mostrar códigodel ejemplo: Con todo

Contenido

Nunjucks macro
{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "descriptionText": "Por favor, corrige los problemas siguientes.",
  "errorList": [
    {
      "text": "Nombre de usuario o contraseña incorrectos."
    },
    {
      "text": "Acepta los términos del servicio para acceder.",
      "href": "#example-error-1"
    }
  ]
}) }}