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>.

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

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>.

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

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

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

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.

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.

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.

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

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

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

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

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.

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

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

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  %}