DESY

Sistema de Diseño del Gobierno de Aragón

Listado de descripciones

Datos

Componente formado por un término asociado a un valor. Pueden agruparse varios de ellos.

Description-list

Por defecto

Descripción visual

Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un término en texto negro peso normal tamaño pequeño, seguido de "definición" en texto negro peso normal del mismo tamaño, dispuestos verticalmente con espaciado mínimo entre ellos.

término
definición
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      }
    }
  ]
}) }}

Grande

Descripción visual

Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un término en texto negro peso normal tamaño mediano, seguido de "definición" en texto negro peso normal del mismo tamaño, dispuestos verticalmente con espaciado interno generoso.

término
definición
Mostrar códigodel ejemplo: Grande

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición",
        "classes": "text-lg"
      }
    }
  ]
}) }}

Extra grande

Descripción visual

Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un término en texto negro peso negrita tamaño grande, seguido de "definición" en texto negro peso negrita del mismo tamaño, dispuestos verticalmente con espaciado interno amplio entre elementos.

término
definición
Mostrar códigodel ejemplo: Extra grande

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición",
        "classes": "font-bold text-xl"
      }
    }
  ]
}) }}

Vertical

Descripción visual

Componente de lista descriptiva con fondo blanco y borde gris claro de 1px. Cada entrada contiene un término en texto gris oscuro pequeño y su definición en texto negro regular, apilados verticalmente. Presenta tres grupos término-definición organizados en disposición vertical, ocupando el ancho completo del contenedor.

término
definición
término
definición
término
definición
Mostrar códigodel ejemplo: Vertical

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "mb-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "mb-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "mb-base"
    }
  ]
}) }}

Horizontal

Descripción visual

Componente de lista descriptiva con fondo blanco y borde gris claro de 1px. Tres grupos de término-definición distribuidos horizontalmente en una sola fila, cada uno con término en texto gris oscuro pequeño arriba y definición en texto negro regular debajo. Los elementos están espaciados uniformemente a lo largo del ancho del contenedor.

término
definición
término
definición
término
definición
Mostrar códigodel ejemplo: Horizontal

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "classes": "flex w-full",
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "flex-1 pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "flex-1 pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "flex-1 pr-base"
    }
  ]
}) }}

Horizontal con 2 filas

Descripción visual

Componente de lista descriptiva con fondo blanco y borde gris claro de 1px. Seis grupos de término-definición organizados en grilla de 2 filas por 3 columnas, cada grupo muestra término en texto gris oscuro pequeño y definición en texto negro regular apilados verticalmente. Los elementos mantienen espaciado uniforme horizontal y vertical entre todas las celdas de la grilla.

término
definición
término
definición
término
definición
término
definición
término
definición
término
definición
Mostrar códigodel ejemplo: Horizontal con 2 filas

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "classes": "flex flex-wrap w-full",
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      },
      "classes": "w-1/3 mb-base pr-base"
    }
  ]
}) }}

Agrupado

Descripción visual

Lista de definiciones con fondo blanco, sin bordes visibles entre elementos. Labels en texto gris oscuro de peso normal, valores en texto negro en negrita. Espaciado vertical generoso entre pares de término-definición, layout de dos columnas con labels alineados a la izquierda y valores alineados a la derecha.

Código de procedimiento
G00345-BX
Nombre del procedimiento
Resolución definitiva
CSV
CSVK45WT8V5T110CPPC
Fecha de captura
13 de Diciembre de 2021. A las 11:48:08
Categoría
Documento simple
Mostrar códigodel ejemplo: Agrupado

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "classes": "w-full py-sm border-t border-b border-neutral-base",
  "items": [
    {
      "term": {
        "text": "Código de procedimiento",
        "classes": "lg:w-1/3"
      },
      "definition": {
        "text": "G00345-BX",
        "classes": "lg:flex-1 font-semibold"
      },
      "classes": "lg:flex py-sm"
    },
    {
      "term": {
        "text": "Nombre del procedimiento",
        "classes": "lg:w-1/3"
      },
      "definition": {
        "text": "Resolución definitiva",
        "classes": "lg:flex-1 font-semibold"
      },
      "classes": "lg:flex py-sm"
    },
    {
      "term": {
        "text": "CSV",
        "classes": "lg:w-1/3"
      },
      "definition": {
        "text": "CSVK45WT8V5T110CPPC",
        "classes": "lg:flex-1 font-semibold"
      },
      "classes": "lg:flex py-sm"
    },
    {
      "term": {
        "text": "Fecha de captura",
        "classes": "lg:w-1/3"
      },
      "definition": {
        "text": "13 de Diciembre de 2021. A las 11:48:08",
        "classes": "lg:flex-1 font-semibold"
      },
      "classes": "lg:flex py-sm"
    },
    {
      "term": {
        "text": "Categoría",
        "classes": "lg:w-1/3"
      },
      "definition": {
        "text": "Documento simple",
        "classes": "lg:flex-1 font-semibold"
      },
      "classes": "lg:flex py-sm"
    }
  ]
}) }}

Con apariencia de tabla

Descripción visual

Lista de definiciones con fondo blanco y bordes grises horizontales de 1px separando cada fila. Labels en texto gris oscuro de peso normal en columna izquierda, valores en texto negro de peso normal en columna derecha. Estructura tabular compacta con padding vertical reducido en cada fila, creando una apariencia de tabla con líneas divisorias.

Nombre y apellidos
Ana Pérez Escribano
Nº identificación
NIF: 00000000T
Importe
45,5€
Impuesto
Impuesto sobre Sucesiones y donaciones
Concepto
Modelo 606 - Liquidaciones Transmisiones Patrimoniales Onerosas.
Número de justificante
6064589854125
Mostrar códigodel ejemplo: Con apariencia de tabla

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "classes": "w-full",
  "items": [
    {
      "term": {
        "text": "Nombre y apellidos",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "Ana Pérez Escribano",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Nº identificación",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "NIF: 00000000T",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Importe",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "html": "<strong>45,5€</strong>",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Impuesto",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "Impuesto sobre Sucesiones y donaciones",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Concepto",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "Modelo 606 - Liquidaciones Transmisiones Patrimoniales Onerosas.",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Número de justificante",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "6064589854125",
        "classes": "lg:w-2/3 px-base py-sm"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    }
  ]
}) }}

Con apariencia de tabla y números

Descripción visual

Lista de definiciones con fondo blanco y bordes grises horizontales de 1px separando filas. Labels en texto gris oscuro de peso normal en columna izquierda, valores numéricos alineados a la derecha en texto negro de peso normal. Estructura tabular con padding vertical uniforme, valores numéricos formateados con separadores de miles y símbolo de moneda, diseño optimizado para mostrar datos financieros.

Activo no corriente
3045,45€
Activo corriente
14,32€
Total activo
279,67€
Capital
100.704,23€
Patrimonio neto
2.345,74€
Consolidación de cuentas
Si
Mostrar códigodel ejemplo: Con apariencia de tabla y números

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "classes": "w-full",
  "items": [
    {
      "term": {
        "text": "Activo no corriente",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "3045,45€",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Activo corriente",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "14,32€",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Total activo",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "279,67€",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Capital",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "100.704,23€",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Patrimonio neto",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "text": "2.345,74€",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    },
    {
      "term": {
        "text": "Consolidación de cuentas",
        "classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
      },
      "definition": {
        "html": "<strong>Si</strong>",
        "classes": "lg:w-2/3 px-base py-sm lg:text-right"
      },
      "classes": "lg:flex -mb-px border-t border-b border-neutral-base"
    }
  ]
}) }}

Con html y clases

Descripción visual

Bloque con borde gris claro conteniendo texto "45" en negro grande y negrita, seguido de un ícono cuadrado pequeño. Arriba aparece "Expedientes abiertos +" en texto pequeño gris. Abajo hay un enlace azul subrayado "Ver todos". Fondo blanco con padding generoso.

Expedientes abiertos
45 Ver todos
Mostrar códigodel ejemplo: Con html y clases

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "html": "Expedientes abiertos <span aria-hidden='true'>&darr;</span>",
        "classes": "mb-sm"
      },
      "definition": {
        "html": "<span class='font-bold text-4xl'>45</span> <svg role='img' aria-label='expedientes'  class='inline-block align-baseline ml-sm' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1.6rem' height='1.6rem'><path d='M140 20a20 20 0 00-20-20H20A20 20 0 000 20v100a20 20 0 0020 20h70a10 10 0 007.07-2.93l40-40A10 10 0 00140 90zM20 22.5a2.5 2.5 0 012.5-2.5h95a2.5 2.5 0 012.5 2.5v55a2.5 2.5 0 01-2.5 2.5H95a15 15 0 00-15 15v22.5a2.5 2.5 0 01-2.5 2.5h-55a2.5 2.5 0 01-2.5-2.5z'/></svg><a href='/' class='c-link block mt-sm font-normal text-sm'>Ver todos</a>"
      }
    }
  ],
  "classes": "inline-block p-base border border-neutral-base rounded-sm"
}) }}

Con atributos

Muestra el código para ver cómo se aplican los atributos

Descripción visual

Bloque con borde gris claro mostrando dos líneas de texto negro. Primera línea dice "Mínimo" en tamaño pequeño, segunda línea dice "definición" en tamaño normal. Fondo blanco con padding mínimo. Layout vertical compacto sin elementos interactivos visibles.

término
definición
Mostrar códigodel ejemplo: Con atributos

Contenido

Nunjucks macro
{% from "components/description-list/_macro.description-list.njk" import componentDescriptionList %}
{{ componentDescriptionList({
  "items": [
    {
      "term": {
        "text": "término",
        "attributes": {
          "id": "term"
        }
      },
      "definition": {
        "text": "definición",
        "attributes": {
          "id": "definition"
        }
      },
      "attributes": {
        "id": "item"
      }
    }
  ],
  "attributes": {
    "id": "description"
  }
}) }}