desy-html

Item

Parámetros Nunjucks del componente: "Item". Versión: 14.0.0

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: headingLevel\n  type: number\n  required: false\n  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.\n- name: title\n  type: object\n  required: true\n  description: This is the title\n  - name: text\n    type: string\n    required: true\n    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.\n  - name: html\n    type: string\n    required: true\n    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.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the item title.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the item title.\n- name: description\n  type: object\n  required: false\n  description: This is the optional description under title\n  - name: text\n    type: string\n    required: true\n    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.\n  - name: html\n    type: string\n    required: true\n    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.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the item description.\n- name: items\n  type: array\n  required: false\n  description: This is a list of metadata\n  - name: text\n    type: string\n    required: true\n    description: Text of the metadata item.\n- name: content\n  type: object\n  required: false\n  description: This is the bottom content\n  - name: text\n    type: string\n    required: true\n    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.\n  - name: html\n    type: string\n    required: true\n    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.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the content.\n- name: icon\n  type: object\n  required: false\n  description: This is the optional icon at left\n  - name: html\n    type: string\n    required: false\n    description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.\n  - name: type\n    type: string\n    required: false\n    description: Predefined icon types are `document`, `link`, `clipboard`\n  - name: containerClasses\n    type: string\n    required: false\n    description: Classes applied to the parent div of icon. Useful to vertical align the icon.\n- name: isDraggable\n  type: boolean\n  required: false\n  description: If true, the item shows a handler icon on left.\n- name: id\n  type: string\n  required: false\n  description: Optional id attribute to add to the div container tag.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the div container tag.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the div container tag.\n- name: caller\n  type: nunjucks-block\n  required: false\n  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.\n","length":3808}

Por defecto

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

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p>Entidades locales de la Comunidad Autónoma de Aragón</p>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/item/_macro.item.njk" import componentItem %}

{{ componentItem({
  "title": {
    "text": "Entidades locales de la Comunidad Autónoma de Aragón"
  }
}) }}

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

Ejemplo: "Por defecto con html", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p>Las entidades beneficiarias deberán tener su sede y actividad <strong class=" font-bold ">principal en Aragón.</strong></p>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Por defecto con html", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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>"
  }
}) }}

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

Ejemplo: "Con encabezado", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <h4>Entidades locales de la Comunidad Autónoma de Aragón</h4>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Con encabezado", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/item/_macro.item.njk" import componentItem %}

{{ componentItem({
  "headingLevel": 4,
  "title": {
    "text": "Entidades locales de la Comunidad Autónoma de Aragón"
  }
}) }}

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

Ejemplo: "Con descripción", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <h4>Registro de alta de la asociación</h4>
      <p>
        Documento acreditativo de registro de alta de la <strong class=" font-bold ">asociación</strong>
      </p>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Con descripción", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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>"
  }
}) }}

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

Ejemplo: "Con items", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <h4>Entidades locales de la Comunidad Autónoma de Aragón</h4>
      <ul class="-ml-sm lg:divide-x lg:divide-neutral-base">
        <li class="lg:inline-block px-sm text-sm text-neutral-dark">Desde modelo</li>
        <li class="lg:inline-block px-sm text-sm text-neutral-dark">Obligatorio previo a resolución</li>
        <li class="lg:inline-block px-sm text-sm text-neutral-dark">Condicionado</li>
      </ul>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Con items", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
    }
  ]
}) }}

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

Ejemplo: "Con contenido", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <h4>Registro de alta de la asociación</h4>
      <p class="text-sm text-neutral-dark">
        Modelo: <a class=" c-link break-all " href=" # ">Modelo de fianza (PDF, 20Kb)</a>
      </p>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Con contenido", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
  }
}) }}

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.

Ejemplo: "Con acciones", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <h4 id="t1">Registro de alta de la asociación</h4>
    </div>
    <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base">
      <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>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Con acciones", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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.

Ejemplo: "Arrastrable", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="self-center h-full mr-lg">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-neutral-base" aria-label="Elemento ordenable" focusable="false" role="img">
      <g fill="currentColor">
        <path d="M41 28a10 10 0 1010-10 10 10 0 00-10 10z" />
        <path d="M79.999 28a10 10 0 1010-10 10 10 0 00-10 10z" />
        <path d="M41 70a10 10 0 1010-10 10 10 0 00-10 10z" />
        <path d="M79.999 70a10 10 0 1010-10 10 10 0 00-10 10z" />
        <path d="M41 112a10 10 0 1010-10 10 10 0 00-10 10z" />
        <path d="M79.999 112a10 10 0 1010-10 10 10 0 00-10 10z" />
      </g>
    </svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p>Entidades locales de la Comunidad Autónoma de Aragón</p>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Arrastrable", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/item/_macro.item.njk" import componentItem %}

{{ componentItem({
  "title": {
    "text": "Entidades locales de la Comunidad Autónoma de Aragón"
  },
  "isDraggable": true
}) }}

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.

Ejemplo: "Bloqueado", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="self-center h-full mr-lg">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-base h-base text-neutral-dark" aria-label="Bloqueado" focusable="false" role="img">
      <path d="M115 55.86V45a45 45 0 00-90 0v10.86A15 15 0 0015 70v55a15 15 0 0015 15h80a15 15 0 0015-15V70a15 15 0 00-10-14.14zM70 110a12.5 12.5 0 1112.5-12.5A12.5 12.5 0 0170 110zm25-55H45V45a25 25 0 0150 0z" fill="currentColor" />
    </svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="t2">Entidades locales de la Comunidad Autónoma de Aragón</p>
    </div>
    <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base">
      <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>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Bloqueado", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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

Ejemplo: "Con icono tipo: documento", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="self-center h-full mr-base">
    <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="Documento" focusable="false" role="img">
      <path d="m15.32 2.15 4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5H15a.49.49 0 0 1 .32.15ZM15.59 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7L16.29.29a1 1 0 0 0-.7-.29Z" fill="currentColor" transform="scale(2)" />
      <path d="M16 11H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM16 15H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM11.5 19H7a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(2)" />
    </svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <h4 id="t3">Resolución de años anteriores</h4>
      <p class="text-sm">
        <a class=" c-link break-all " href=" # ">Resolución años anteriores (PDF, 20Kb)</a>
      </p>
    </div>
    <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-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>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Con icono tipo: documento", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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

Ejemplo: "Con icono tipo: enlace", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="self-center h-full mr-base">
    <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="Enlace" focusable="false" role="img">
      <path d="M12.41 14.91a1 1 0 0 0-.55 1.3 1 1 0 0 1-.21 1.09l-2.83 2.83a2 2 0 0 1-2.83 0L3.87 18a2 2 0 0 1 0-2.83l2.83-2.82a1 1 0 0 1 1.09-.21 1 1 0 0 0 .76-1.85 3 3 0 0 0-3.27.65l-2.83 2.83a4 4 0 0 0 0 5.65l2.13 2.13a4 4 0 0 0 5.65 0l2.83-2.83a3 3 0 0 0 .65-3.27 1 1 0 0 0-1.3-.54Z" fill="currentColor" transform="scale(2)" />
      <path d="M7.76 16.24a1 1 0 0 0 1.41 0L17 8.46a1 1 0 0 0-1.41-1.41l-7.83 7.78a1 1 0 0 0 0 1.41Z" fill="currentColor" transform="scale(2)" />
      <path d="m21.55 4.57-2.13-2.12a4 4 0 0 0-5.65 0l-2.83 2.83a3 3 0 0 0-.88 2.12 3 3 0 0 0 .23 1.15 1 1 0 0 0 1.85-.76 1 1 0 0 1-.08-.39 1 1 0 0 1 .29-.7l2.83-2.83a2 2 0 0 1 2.83 0L20.13 6a2 2 0 0 1 0 2.83l-2.83 2.81a1 1 0 0 1-1.09.22 1 1 0 0 0-1.3.54 1 1 0 0 0 .54 1.31 3 3 0 0 0 3.27-.65l2.83-2.83a4 4 0 0 0 0-5.66Z" fill="currentColor" transform="scale(2)" />
    </svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <h4 id="t4">Lista de admitidos y excluidos de la convocatoria publicado en el BOA</h4>
      <p class="text-sm">
        <a class=" c-link break-all " href=" # ">Lista completa de admitidos (PDF, 20Kb)</a>
      </p>
    </div>
    <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base">
      <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>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Con icono tipo: enlace", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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

Ejemplo: "Con icono tipo: portapapeles", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="self-center h-full mr-base">
    <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="Datos" focusable="false" role="img">
      <path d="M16.5 9h-9a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5ZM17.25 13.25a.76.76 0 0 0-.75-.75h-9a.75.75 0 0 0 0 1.5h9a.76.76 0 0 0 .75-.75ZM10 6.5h4a1 1 0 0 0 1-1V3A3 3 0 0 0 13.82.62 3 3 0 0 0 9 3.09V5.5a1 1 0 0 0 1 1Zm1.25-3.75a.75.75 0 1 1 .75.75.76.76 0 0 1-.75-.75Z" fill="currentColor" transform="scale(2)" />
      <path d="M19.5 3h-2.75a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H19a.5.5 0 0 1 .5.5v12.79a.51.51 0 0 1-.15.36l-3.2 3.2a.49.49 0 0 1-.36.15H5a.5.5 0 0 1-.5-.5v-16A.5.5 0 0 1 5 5h2.25a.25.25 0 0 0 .25-.25v-1.5A.25.25 0 0 0 7.25 3H4.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z" fill="currentColor" transform="scale(2)" />
      <path d="M7.5 16a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5Z" fill="currentColor" transform="scale(2)" />
    </svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <h4 id="t5">Datos de la empresa</h4>
      <ul class="-ml-sm lg:divide-x lg:divide-neutral-base">
        <li class="lg:inline-block px-sm text-sm text-neutral-dark">12 campos</li>
        <li class="lg:inline-block px-sm text-sm text-neutral-dark">Con dependencia</li>
        <li class="lg:inline-block px-sm text-sm text-neutral-dark">Tabla de datos</li>
      </ul>
    </div>
    <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base">
      <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>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Con icono tipo: portapapeles", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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

Ejemplo: "Con icono personalizado", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="self-center h-full mr-base">
    <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>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <h4 id="t6">Lista de admitidos y excluidos de la convocatoria publicado en el BOA</h4>
      <p class="text-sm">
        <a class=" c-link break-all " href=" # ">Lista completa de admitidos (PDF, 20Kb)</a>
      </p>
    </div>
    <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base">
      <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>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Con icono personalizado", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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.

Ejemplo: "Con icono tipo: documento, alineado verticalmente arriba", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="self-start h-full mr-base">
    <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="Documento" focusable="false" role="img">
      <path d="m15.32 2.15 4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5H15a.49.49 0 0 1 .32.15ZM15.59 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7L16.29.29a1 1 0 0 0-.7-.29Z" fill="currentColor" transform="scale(2)" />
      <path d="M16 11H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM16 15H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM11.5 19H7a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(2)" />
    </svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <h4 id="t3">Resolución de años anteriores</h4>
      <p class="text-sm">
        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.
      </p>
    </div>
    <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-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>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Con icono tipo: documento, alineado verticalmente arriba", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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

Ejemplo: "Arrastrable con icono tipo: documento", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="self-center h-full mr-lg">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-neutral-base" aria-label="Elemento ordenable" focusable="false" role="img">
      <g fill="currentColor">
        <path d="M41 28a10 10 0 1010-10 10 10 0 00-10 10z" />
        <path d="M79.999 28a10 10 0 1010-10 10 10 0 00-10 10z" />
        <path d="M41 70a10 10 0 1010-10 10 10 0 00-10 10z" />
        <path d="M79.999 70a10 10 0 1010-10 10 10 0 00-10 10z" />
        <path d="M41 112a10 10 0 1010-10 10 10 0 00-10 10z" />
        <path d="M79.999 112a10 10 0 1010-10 10 10 0 00-10 10z" />
      </g>
    </svg>
  </div>
  <div class="self-center h-full mr-base">
    <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="Documento" focusable="false" role="img">
      <path d="m15.32 2.15 4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5H15a.49.49 0 0 1 .32.15ZM15.59 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7L16.29.29a1 1 0 0 0-.7-.29Z" fill="currentColor" transform="scale(2)" />
      <path d="M16 11H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM16 15H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM11.5 19H7a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(2)" />
    </svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <h4 id="t7">Resolución de años anteriores</h4>
      <p class="text-sm">
        <a class=" c-link break-all " href=" # ">Resolución años anteriores (PDF, 20Kb)</a>
      </p>
    </div>
    <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base">
      <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>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Arrastrable con icono tipo: documento", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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

Ejemplo: "Con clases, descripción, items, contenido y acciones", de código HTML, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- item -->
<div class="flex flex-wrap p-base bg-white border border-neutral-base rounded">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <h4 class="font-bold" id="t8">Registro de alta de la asociación</h4>
      <p>
        Documento acreditativo de registro de alta de la asociación
      </p>
      <ul class="-ml-sm lg:divide-x lg:divide-neutral-base">
        <li class="lg:inline-block px-sm text-sm text-neutral-dark">Desde modelo</li>
        <li class="lg:inline-block px-sm text-sm text-neutral-dark">Obligatorio previo a resolución</li>
        <li class="lg:inline-block px-sm text-sm text-neutral-dark">Condicionado</li>
      </ul>
      <p class="text-sm text-neutral-dark">
        Modelo: <a class=" c-link break-all " href=" # ">Modelo de fianza (PDF, 20Kb)</a>
      </p>
    </div>
    <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base">
      <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>
    </div>
  </div>
</div>
<!-- /item -->

Ejemplo: "Con clases, descripción, items, contenido y acciones", de código Nunjucks, para maquetar el componente: "Item", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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