DESY

Sistema de Diseño del Gobierno de Aragón.

Índice de apartados de esta página

Item

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

Item

Mostrar parámetros

Parámetros del componente

              params:
- name: headingLevel
  type: number
  required: false
  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on. If no headingLevel is present the title will be a p tag.
- name: title
  type: object
  required: true
  description: This is the title
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item title.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the item title.
- name: description
  type: object
  required: false
  description: This is the optional description under title
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item description.
- name: items
  type: array
  required: false
  description: This is a list of metadata
  - name: text
    type: string
    required: true
    description: Text of the metadata item.
- name: content
  type: object
  required: false
  description: This is the bottom content
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the content.
- name: icon
  type: object
  required: false
  description: This is the optional icon at left
  - name: html
    type: string
    required: false
    description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
  - name: type
    type: string
    required: false
    description: Predefined icon types are `document`, `link`, `clipboard`
  - name: containerClasses
    type: string
    required: false
    description: Classes applied to the parent div of icon. Useful to vertical align the icon.
- name: isDraggable
  type: boolean
  required: false
  description: If true, the item shows a handler icon on left.
- name: id
  type: string
  required: false
  description: Optional id attribute to add to the div container tag.
- name: classes
  type: string
  required: false
  description: Classes to add to the div container tag.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the div container tag.
- name: caller
  type: nunjucks-block
  required: false
  description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire item component in a `call` block.

Por defecto

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({
  "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({
  "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({
  "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({
  "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({
  "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

http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf

Mostrar códigodel ejemplo: Con icono tipo: enlace

Contenido

Nunjucks macro


{% from "components/item/_macro.item.njk" import componentItem %}
{% call componentItem({
  "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=\" # \">http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</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({
  "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

http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf

Mostrar códigodel ejemplo: Con icono personalizado

Contenido

Nunjucks macro


{% from "components/item/_macro.item.njk" import componentItem %}
{% call componentItem({
  "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=\" # \">http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</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({
  "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({
  "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({
  "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  %}