DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Item de estado

Datos

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

Status-item

Por defecto

Recuerda que los items, por accesibilidad, deben estar rodeados de una etiqueta semántica, normalmente un <li>.

Descripción visual

Contenedor rectangular con borde gris claro, fondo blanco. En la esquina superior izquierda aparece texto indicando el tipo en color gris oscuro. Dentro del contenedor hay un label en negro alineado a la izquierda, y un enlace en azul alineado a la derecha.

Título

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "default",
  "title": {
    "text": "Título"
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> item del Título</span></button>
{% endcall  %}

Por defecto sólo items

Descripción visual

Contenedor rectangular con borde gris claro, fondo blanco. En la esquina superior izquierda aparece texto indicando el tipo en gris oscuro. Dentro hay una tabla con tres columnas: la primera muestra texto de términos en negro, la segunda muestra definiciones en negro, y la tercera contiene un enlace azul y una marca de verificación verde con indicador de estado. Las tres filas repiten esta estructura con fondos alternados gris muy claro y blanco.

término
definición
término
definición
término
definición

Correcto

Mostrar códigodel ejemplo: Por defecto sólo items

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "only-items",
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      }
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      }
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      }
    }
  ],
  "status": {
    "text": "Correcto",
    "icon": {
      "type": "success"
    }
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> los datos de término y definición y el resto</span></button>
{% endcall  %}

Con título html

Descripción visual

Contenedor rectangular con borde gris claro, fondo blanco. En la esquina superior izquierda aparece texto indicando el tipo en gris oscuro. Dentro hay texto negro que describe autorización para consulta de datos, seguido de texto gris entre paréntesis. En la esquina superior derecha del contenedor hay un enlace en azul.

Autorización para la consulta de datos de las personas de la unidad familiar. (Documento condicionado)

Mostrar códigodel ejemplo: Con título html

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-title-html",
  "title": {
    "html": "Autorización para la consulta de datos de las personas de la unidad familiar. <span class='text-neutral-dark'>(Documento condicionado)</span>"
  }
}) %}
<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>
{% endcall  %}

Con pista

Descripción visual

Contenedor con borde gris claro de 1px, fondo blanco, y padding interno. Incluye un título negro en la parte superior, un subtexto gris claro debajo, y dos enlaces en la esquina superior derecha: uno azul y otro negro con icono de check.

Personas de la unidad familiar

2 personas añadidas

Aportado

Mostrar códigodel ejemplo: Con pista

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-hint",
  "title": {
    "text": "Personas de la unidad familiar"
  },
  "hint": {
    "text": "2 personas añadidas"
  },
  "status": {
    "text": "Aportado",
    "icon": {
      "type": "success"
    }
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> personas de la unidad familiar</span></button>
{% endcall  %}

Con pista html

Descripción visual

Contenedor con borde gris claro de 1px, fondo blanco, y padding interno. Contiene un texto descriptivo gris oscuro alineado a la izquierda, un enlace azul en la esquina superior derecha, y un enlace de descarga con icono en la parte inferior izquierda en color azul.

Autorización para la consulta de datos de las personas de la unidad familiar

Descargar modelo

Mostrar códigodel ejemplo: Con pista html

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-hint-html",
  "title": {
    "text": "Autorización para la consulta de datos de las personas de la unidad familiar"
  },
  "hint": {
    "html": "<a href='#' class='c-link'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='inline-block self-center w-4 h-4 mr-sm no-underline' role='img' aria-hidden='true'><path d='M100.3 52.2a7.49 7.49 0 00-10.6 0L77.5 64.39V7.5a7.5 7.5 0 00-15 0v56.89L50.3 52.2a7.5 7.5 0 10-10.6 10.6l25 25a7.49 7.49 0 0010.6 0l25-25a7.49 7.49 0 000-10.6zM130 95a10 10 0 00-10 10v12.5a2.5 2.5 0 01-2.5 2.5h-95a2.5 2.5 0 01-2.5-2.5V105a10 10 0 00-20 0v15a20 20 0 0020 20h100a20 20 0 0020-20v-15a10 10 0 00-10-10z' fill='currentColor'/></svg>Descargar modelo</a>"
  }
}) %}
<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>
{% endcall  %}

Con estado simple

Descripción visual

Contenedor con borde gris claro de 1px, fondo blanco, y padding interno. Presenta un texto descriptivo gris oscuro alineado a la izquierda y dos elementos en la esquina superior derecha: un enlace azul seguido de una etiqueta negra en mayúsculas.

Datos adicionales del solicitante

Iniciado

Mostrar códigodel ejemplo: Con estado simple

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-simple",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "status": {
    "text": "Iniciado"
  }
}) %}
<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}

Con estado éxito

Descripción visual

Contenedor rectangular con fondo blanco y borde gris claro. Encabezado de texto gris oscuro peso normal alineado a la izquierda. Lado derecho contiene enlace azul y badge negro con ícono de checkmark verde.

Datos adicionales del solicitante

Aportado

Mostrar códigodel ejemplo: Con estado éxito

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-success",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "status": {
    "text": "Aportado",
    "icon": {
      "type": "success"
    }
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}

Con estado alerta

Descripción visual

Contenedor rectangular con fondo rosa muy claro y borde rojo fino. Encabezado de texto gris oscuro peso normal arriba, mensaje de error en rojo debajo. Lado derecho contiene enlace azul y badge rojo con ícono de advertencia triangular.

Datos adicionales del solicitante

Error:Es necesario aportar este documento para enviar el trámite

Incompleto

Mostrar códigodel ejemplo: Con estado alerta

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-alert",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "errorMessage": {
    "text": "Es necesario aportar este documento para enviar el trámite",
    "classes": "my-sm text-alert-base"
  },
  "status": {
    "text": "Incompleto",
    "icon": {
      "type": "alert"
    },
    "classes": "text-alert-base"
  },
  "classes": "border-l-4 border-alert-base"
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}

Con estado cargando

Descripción visual

Contenedor rectangular con fondo blanco y borde gris claro. Encabezado de texto gris oscuro peso normal alineado a la izquierda. Lado derecho contiene enlace azul y texto negro con spinner circular animado.

Datos adicionales del solicitante

Subiendo (20%)

Mostrar códigodel ejemplo: Con estado cargando

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-loading",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "status": {
    "text": "Subiendo (20%)",
    "icon": {
      "type": "loading"
    }
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}

Con estado error

Descripción visual

Bloque con borde rojo en el lateral izquierdo y fondo rosado claro. Contiene un encabezado en texto negro, texto descriptivo gris, y un enlace azul subrayado. En la esquina superior derecha aparecen dos elementos: un enlace azul y una etiqueta roja con texto blanco.

Datos adicionales del solicitante

Error:Se ha producido un error al subir el archivo

Error

Mostrar códigodel ejemplo: Con estado error

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-error",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "errorMessage": {
    "text": "Se ha producido un error al subir el archivo",
    "classes": "my-sm text-alert-base"
  },
  "status": {
    "text": "Error",
    "icon": {
      "type": "error"
    },
    "classes": "text-alert-base"
  },
  "classes": "border-l-4 border-alert-base"
}) %}
<button class='c-button c-button--transparent'>Ver<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}

Con html en la definición

Descripción visual

Bloque rectangular con fondo blanco y borde gris claro. Fila horizontal dividida en tres secciones: etiqueta gris a la izquierda, texto negro con enlace azul en el centro, y dos elementos a la derecha (enlace azul y etiqueta verde con checkmark blanco). Layout en disposición horizontal con alineación vertical centrada.

Acreditación
Mediante archivo adjunto Modelo de solicitud (PDF, 200Kb)

Completo

Mostrar códigodel ejemplo: Con html en la definición

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-html-in-definition",
  "items": [
    {
      "term": {
        "text": "Acreditación"
      },
      "definition": {
        "html": "Mediante archivo adjunto <a href='#' class='c-link inline-block'>Modelo de solicitud (PDF, 200Kb)</a>"
      }
    }
  ],
  "status": {
    "text": "Completo",
    "icon": {
      "type": "success"
    }
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> acreditación</span></button>
{% endcall  %}

Incompleto

Descripción visual

Bloque con borde rosa claro en el lateral izquierdo y fondo blanco. Contiene tres filas de información en formato clave-valor: etiquetas grises a la izquierda y valores negros a la derecha. En la esquina superior derecha aparecen un enlace azul y una etiqueta roja con triángulo de alerta blanco.

Nombre
Ana
Apellidos
Pérez Escribano
Número de identificación
72882918B

Incompleto

Mostrar códigodel ejemplo: Incompleto

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "incompleto-status-item",
  "items": [
    {
      "term": {
        "text": "Nombre"
      },
      "definition": {
        "text": "Ana"
      }
    },
    {
      "term": {
        "text": "Apellidos"
      },
      "definition": {
        "text": "Pérez Escribano"
      }
    },
    {
      "term": {
        "text": "Número de identificación"
      },
      "definition": {
        "text": "72882918B"
      }
    }
  ],
  "status": {
    "text": "Incompleto",
    "icon": {
      "type": "alert"
    }
  },
  "classes": "border-l-4 border-alert-base"
}) %}
<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}