DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Item

Datos

Bloque que presenta una información o acciones determinadas y que pueden apilarse varios de ellos.

Item

Por defecto

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

Descripción visual

Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene texto negro de tamaño estándar alineado a la izquierda con padding interno moderado. Esquinas ligeramente redondeadas.

Entidades locales de la Comunidad Autónoma de Aragón

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/item/_macro.item.njk" import componentItem %}
{{ componentItem({
  "title": {
    "text": "Entidades locales de la Comunidad Autónoma de Aragón"
  }
}) }}

Por defecto con html

Descripción visual

Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene texto negro de tamaño estándar con una palabra en negrita seguida de texto normal, alineado a la izquierda con padding interno moderado. Esquinas ligeramente redondeadas.

Las entidades beneficiarias deberán tener su sede y actividad principal en Aragón.

Mostrar códigodel ejemplo: Por defecto con html

Contenido

Nunjucks macro
{% from "components/item/_macro.item.njk" import componentItem %}
{{ componentItem({
  "title": {
    "html": "Las entidades beneficiarias deberán tener su sede y actividad <strong class=' font-bold '>principal en Aragón.</strong>"
  }
}) }}

Con encabezado

Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. En este ejemplo: 'headingLevel': 4 creará un encabezado <h4>.

Descripción visual

Caja rectangular con borde gris claro de 1px y fondo blanco. Incluye encabezado en texto gris oscuro de tamaño pequeño en la parte superior, seguido de texto negro de tamaño estándar en la línea inferior, ambos alineados a la izquierda con padding interno moderado. Esquinas ligeramente redondeadas.

Entidades locales de la Comunidad Autónoma de Aragón

Mostrar códigodel ejemplo: Con encabezado

Contenido

Nunjucks macro
{% from "components/item/_macro.item.njk" import componentItem %}
{{ componentItem({
  "headingLevel": 4,
  "title": {
    "text": "Entidades locales de la Comunidad Autónoma de Aragón"
  }
}) }}

Con descripción

Descripción visual

Contenedor rectangular con borde gris claro de 1px y fondo blanco. Título en negrita negro seguido de dos líneas de texto en peso normal, negro, tamaño mediano. Espaciado vertical consistente entre elementos de texto.

Registro de alta de la asociación

Documento acreditativo de registro de alta de la asociación

Mostrar códigodel ejemplo: Con descripción

Contenido

Nunjucks macro
{% from "components/item/_macro.item.njk" import componentItem %}
{{ componentItem({
  "headingLevel": 4,
  "title": {
    "html": "Registro de alta de la asociación"
  },
  "description": {
    "html": "Documento acreditativo de registro de alta de la <strong class=' font-bold '>asociación</strong>"
  }
}) }}

Con items

Descripción visual

Contenedor rectangular con borde gris claro de 1px y fondo blanco. Título en negrita negro seguido de caja interna con fondo gris muy claro, conteniendo texto negro en múltiples segmentos separados por líneas verticales grises. Espaciado interno generoso en la caja gris.

Entidades locales de la Comunidad Autónoma de Aragón

  • Desde modelo
  • Obligatorio previo a resolución
  • Condicionado
Mostrar códigodel ejemplo: Con items

Contenido

Nunjucks macro
{% from "components/item/_macro.item.njk" import componentItem %}
{{ componentItem({
  "headingLevel": 4,
  "title": {
    "text": "Entidades locales de la Comunidad Autónoma de Aragón"
  },
  "items": [
    {
      "text": "Desde modelo"
    },
    {
      "text": "Obligatorio previo a resolución"
    },
    {
      "text": "Condicionado"
    }
  ]
}) }}

Con contenido

Descripción visual

Contenedor rectangular con borde gris claro de 1px y fondo blanco. Título en negrita negro seguido de subtexto gris en peso normal. Enlace azul subrayado debajo del subtexto. Espaciado vertical uniforme entre todos los elementos.

Registro de alta de la asociación

Modelo: Modelo de fianza (PDF, 20Kb)

Mostrar códigodel ejemplo: Con contenido

Contenido

Nunjucks macro
{% from "components/item/_macro.item.njk" import componentItem %}
{{ componentItem({
  "headingLevel": 4,
  "title": {
    "text": "Registro de alta de la asociación"
  },
  "content": {
    "html": "Modelo: <a class=' c-link break-all ' href=' # '>Modelo de fianza (PDF, 20Kb)</a> ",
    "classes": "text-neutral-dark"
  }
}) }}

Con acciones

Utiliza el componente como un caller para anidar contenido. En este ejemplo el contenido es una lista de 2 botones de acciones. Para que sea accesible, cada botón debe tener un aria-labelledby que apunte al id de si mismo y al id del título. Muestra el código para verlo.

Descripción visual

Caja rectangular con borde gris claro, fondo blanco, altura aproximada de 60px. Contiene texto negro alineado a la izquierda y dos enlaces azules ("Eliminar" y "Editar") alineados a la derecha en la misma línea. Los enlaces azules son interactivos y están separados por un pequeño espacio.

Registro de alta de la asociación

Mostrar códigodel ejemplo: Con acciones

Contenido

Nunjucks macro

{% from "components/item/_macro.item.njk" import componentItem %}
{% call componentItem({
  "headingLevel": 4,
  "title": {
    "text": "Registro de alta de la asociación",
    "attributes": {
      "id": "t1"
    }
  }
}) %}
<ul class='flex flex-wrap gap-sm'><li><button id='b-1a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-1a t1'>Eliminar</button></li><li><button id='b-1b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-1b t1'>Editar</button></li></ul>
{% endcall  %}

Arrastrable

Usa el parámetro 'isDraggable': true para mostrar un icono de arrastrar.

Descripción visual

Caja rectangular con borde gris claro, fondo blanco, altura aproximada de 50px. Incluye un icono de líneas horizontales (handle de arrastre) alineado a la izquierda, seguido de texto negro. Fondo blanco uniforme sin elementos adicionales visibles en el área derecha.

Entidades locales de la Comunidad Autónoma de Aragón

Mostrar códigodel ejemplo: Arrastrable

Contenido

Nunjucks macro
{% from "components/item/_macro.item.njk" import componentItem %}
{{ componentItem({
  "title": {
    "text": "Entidades locales de la Comunidad Autónoma de Aragón"
  },
  "isDraggable": true
}) }}

Bloqueado

Usa el parámetro 'isLocked': true para mostrar un icono de bloqueado.

Descripción visual

Caja rectangular con borde gris claro, fondo gris muy claro (casi blanco), altura aproximada de 60px. Presenta un icono de candado gris a la izquierda, texto negro en el centro, y dos enlaces azules ("Eliminar" y "Editar") alineados a la derecha. Fondo sutilmente diferenciado del blanco puro indica estado bloqueado.

Entidades locales de la Comunidad Autónoma de Aragón

Mostrar códigodel ejemplo: Bloqueado

Contenido

Nunjucks macro

{% from "components/item/_macro.item.njk" import componentItem %}
{% call componentItem({
  "title": {
    "text": "Entidades locales de la Comunidad Autónoma de Aragón",
    "attributes": {
      "id": "t2"
    }
  },
  "isLocked": true
}) %}
<ul class='flex flex-wrap gap-sm'><li><button id='b-2a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-2a t2'>Eliminar</button></li><li><button id='b-2b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-2b t2'>Editar</button></li></ul>
{% endcall  %}

Con icono tipo: documento

Descripción visual

Elemento rectangular con fondo blanco y borde gris claro de 1px. Contiene un icono de documento gris a la izquierda, título en negrita negro, subtítulo en texto azul subrayado (enlace), y dos botones de texto azul alineados a la derecha.

Resolución de años anteriores

Resolución años anteriores (PDF, 20Kb)

Mostrar códigodel ejemplo: Con icono tipo: documento

Contenido

Nunjucks macro

{% from "components/item/_macro.item.njk" import componentItem %}
{% call componentItem({
  "headingLevel": 4,
  "title": {
    "text": "Resolución de años anteriores",
    "attributes": {
      "id": "t3"
    }
  },
  "content": {
    "html": "<a class=' c-link break-all ' href=' # '>Resolución años anteriores (PDF, 20Kb)</a> "
  },
  "icon": {
    "type": "document"
  }
}) %}
<ul class='flex flex-wrap gap-sm'><li><button id='b-3a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-3a t3'>Eliminar</button></li><li><button id='b-3b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-3b t3'>Editar</button></li></ul>
{% endcall  %}

Con icono tipo: enlace

Descripción visual

Elemento rectangular con fondo blanco y borde gris claro de 1px. Contiene un icono de enlace gris a la izquierda, título en negro peso normal, subtítulo en texto azul subrayado (enlace), y dos botones de texto azul alineados a la derecha.

Lista de admitidos y excluidos de la convocatoria publicado en el BOA

Lista completa de admitidos (PDF, 20Kb)

Mostrar códigodel ejemplo: Con icono tipo: enlace

Contenido

Nunjucks macro

{% from "components/item/_macro.item.njk" import componentItem %}
{% call componentItem({
  "headingLevel": 4,
  "title": {
    "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA",
    "attributes": {
      "id": "t4"
    }
  },
  "content": {
    "html": "<a class=' c-link break-all ' href=' # '>Lista completa de admitidos (PDF, 20Kb)</a> "
  },
  "icon": {
    "type": "link"
  }
}) %}
<ul class='flex flex-wrap gap-sm'><li><button id='b-4a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-4a t4'>Eliminar</button></li><li><button id='b-4b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-4b t4'>Editar</button></li></ul>
{% endcall  %}

Con icono tipo: portapapeles

Descripción visual

Elemento rectangular con fondo blanco y borde gris claro de 1px. Contiene un icono de portapapeles gris a la izquierda, título en negrita negro, línea de metadatos con separadores verticales en texto gris, y dos botones de texto azul alineados a la derecha.

Datos de la empresa

  • 12 campos
  • Con dependencia
  • Tabla de datos
Mostrar códigodel ejemplo: Con icono tipo: portapapeles

Contenido

Nunjucks macro

{% from "components/item/_macro.item.njk" import componentItem %}
{% call componentItem({
  "headingLevel": 4,
  "title": {
    "text": "Datos de la empresa",
    "attributes": {
      "id": "t5"
    }
  },
  "items": [
    {
      "text": "12 campos"
    },
    {
      "text": "Con dependencia"
    },
    {
      "text": "Tabla de datos"
    }
  ],
  "icon": {
    "type": "clipboard"
  }
}) %}
<ul class='flex flex-wrap gap-sm'><li><button id='b-5a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-5a t5'>Eliminar</button></li><li><button id='b-5b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-5b t5'>Editar</button></li></ul>
{% endcall  %}

Con icono personalizado

Descripción visual

Contenedor rectangular con fondo blanco y borde gris claro de 1px. Incluye un icono de carpeta gris a la izquierda, seguido de texto de título negro en peso normal y un enlace azul subrayado debajo. Botones en azul están alineados a la derecha del contenedor.

Lista de admitidos y excluidos de la convocatoria publicado en el BOA

Lista completa de admitidos (PDF, 20Kb)

Mostrar códigodel ejemplo: Con icono personalizado

Contenido

Nunjucks macro

{% from "components/item/_macro.item.njk" import componentItem %}
{% call componentItem({
  "headingLevel": 4,
  "title": {
    "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA",
    "attributes": {
      "id": "t6"
    }
  },
  "content": {
    "html": "<a class=' c-link break-all ' href=' # '>Lista completa de admitidos (PDF, 20Kb)</a> "
  },
  "icon": {
    "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'  width='1em' height='1em' class='w-8 h-8 text-neutral-dark' aria-label='Icono de papelera' focusable='false' role='img'><path d='M19.5 7.5h-15A.5.5 0 0 0 4 8v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a.5.5 0 0 0-.5-.5Zm-9.25 13a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0Zm5 0a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0ZM22 4h-4.75a.25.25 0 0 1-.25-.25V2.5A2.5 2.5 0 0 0 14.5 0h-5A2.5 2.5 0 0 0 7 2.5v1.25a.25.25 0 0 1-.25.25H2a1 1 0 0 0 0 2h20a1 1 0 0 0 0-2ZM9 3.75V2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v1.25a.25.25 0 0 1-.25.25h-5.5A.25.25 0 0 1 9 3.75Z' fill='currentColor' transform='scale(2)'/></svg>"
  }
}) %}
<ul class='flex flex-wrap gap-sm'><li><button id='b-6a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-6a t6'>Eliminar</button></li><li><button id='b-6b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-6b t6'>Editar</button></li></ul>
{% endcall  %}

Con icono tipo: documento, alineado verticalmente arriba

Usa el parámetro containerClasses del parámetro icon para añadir clases al contenedor del icono. Esto permite posicionarlo o cambiar de color. En este ejemplo el icono aparece alineado verticalmente arriba en vez de centrado.

Descripción visual

Contenedor rectangular con fondo blanco y borde gris claro de 1px. Presenta un icono de documento gris alineado en la parte superior izquierda, con título negro en peso normal a su derecha y párrafo de texto gris en peso normal debajo que ocupa varias líneas. Botones en azul están posicionados en la esquina superior derecha.

Resolución de años anteriores

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Mostrar códigodel ejemplo: Con icono tipo: documento, alineado verticalmente arriba

Contenido

Nunjucks macro

{% from "components/item/_macro.item.njk" import componentItem %}
{% call componentItem({
  "headingLevel": 4,
  "title": {
    "text": "Resolución de años anteriores",
    "attributes": {
      "id": "t3"
    }
  },
  "content": {
    "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n        proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  },
  "icon": {
    "type": "document",
    "containerClasses": "self-start h-full mr-base"
  }
}) %}
<ul class='flex flex-wrap gap-sm'><li><button id='b-3a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-3a t3'>Eliminar</button></li><li><button id='b-3b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-3b t3'>Editar</button></li></ul>
{% endcall  %}

Arrastrable con icono tipo: documento

Descripción visual

Contenedor rectangular con fondo blanco y borde gris claro de 1px. Muestra un icono de manejador de arrastre gris (seis puntos) a la izquierda, seguido de un icono de documento gris, título negro en peso normal y enlace azul subrayado debajo del título. Botones en azul están alineados a la derecha del contenedor.

Resolución de años anteriores

Resolución años anteriores (PDF, 20Kb)

Mostrar códigodel ejemplo: Arrastrable con icono tipo: documento

Contenido

Nunjucks macro

{% from "components/item/_macro.item.njk" import componentItem %}
{% call componentItem({
  "headingLevel": 4,
  "title": {
    "text": "Resolución de años anteriores",
    "attributes": {
      "id": "t7"
    }
  },
  "content": {
    "html": "<a class=' c-link break-all ' href=' # '>Resolución años anteriores (PDF, 20Kb)</a> "
  },
  "icon": {
    "type": "document"
  },
  "isDraggable": true
}) %}
<ul class='flex flex-wrap gap-sm'><li><button id='b-7a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-7a t7'>Eliminar</button></li><li><button id='b-7b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-7b t7'>Editar</button></li></ul>
{% endcall  %}

Con clases, descripción, items, contenido y acciones

Descripción visual

Componente rectangular con borde gris claro, fondo blanco y encabezado con texto negro en negrita. Contiene título, subtítulo gris, metadatos con separadores verticales, y enlaces azules alineados a la derecha superior.

Registro de alta de la asociación

Documento acreditativo de registro de alta de la asociación

  • Desde modelo
  • Obligatorio previo a resolución
  • Condicionado

Modelo: Modelo de fianza (PDF, 20Kb)

Mostrar códigodel ejemplo: Con clases, descripción, items, contenido y acciones

Contenido

Nunjucks macro

{% from "components/item/_macro.item.njk" import componentItem %}
{% call componentItem({
  "headingLevel": 4,
  "title": {
    "text": "Registro de alta de la asociación",
    "classes": "font-bold",
    "attributes": {
      "id": "t8"
    }
  },
  "description": {
    "text": "Documento acreditativo de registro de alta de la asociación"
  },
  "items": [
    {
      "text": "Desde modelo"
    },
    {
      "text": "Obligatorio previo a resolución"
    },
    {
      "text": "Condicionado"
    }
  ],
  "content": {
    "html": "Modelo: <a class=' c-link break-all ' href=' # '>Modelo de fianza (PDF, 20Kb)</a> ",
    "classes": "text-neutral-dark"
  }
}) %}
<ul class='flex flex-wrap gap-sm'><li><button id='b-8a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-8a t8'>Eliminar</button></li><li><button id='b-8b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-8b t8'>Editar</button></li></ul>
{% endcall  %}