Item examples

Show params

Params

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

default

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

Show code

Macro

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

Markup

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

default with html

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

Show code

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

Markup

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

with headingLevel

headingLevel is 4

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

Show code

Macro

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

Markup

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

with description

Registro de alta de la asociación

Documento acreditativo de registro de alta de la asociación

Show code

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

Markup

<!-- 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>Registro de alta de la asociación</p>
        <p>
            Documento acreditativo de registro de alta de la <strong class=" font-bold ">asociación</strong>
        </p>
    </div>
  </div>
</div>
<!-- /item -->

with items

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

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

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

Markup

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

with content

Registro de alta de la asociación

Modelo: Modelo de fianza (PDF, 20Kb)

Show code

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

Markup

<!-- 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>Registro de alta de la asociación</p>
        <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 -->

with actions

Registro de alta de la asociación

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/item/_macro.item.njk" import componentItem %}
{% call componentItem({
  "title": {
    "text": "Registro de alta de la asociación",
    "attributes": {
      "id": "t1"
    }
  },
  "caller": "<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>"
})  %}
    <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 %}

Markup

<!-- 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 id="t1">Registro de alta de la asociació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-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 -->

draggable

isDraggable: true

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

Show code

Macro

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

Markup

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

locked

isLocked: true

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

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% 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,
  "caller": "<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>"
})  %}
    <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 %}

Markup

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

with icon type document

Resolución de años anteriores

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

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% 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"
  },
  "caller": "<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>"
})  %}
    <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 %}

Markup

<!-- 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 140 140" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Archivo" focusable="false" role="img"><path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor"/><path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p id="t3">Resolución de años anteriores</p>
        <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 -->

with icon type link

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

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% 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"
  },
  "caller": "<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>"
})  %}
    <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 %}

Markup

<!-- 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 140 140" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Link" focusable="false" role="img"><path d="M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z" fill="currentColor"/><path d="M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z" fill="currentColor"/><path d="M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p id="t4">Lista de admitidos y excluidos de la convocatoria publicado en el BOA</p>
        <p class="text-sm">
            <a class=" c-link break-all " href=" # ">http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</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 -->

with icon type clipboard

Datos de la empresa

  • 12 campos
  • Con dependencia
  • Tabla de datos
Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% 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"
  },
  "caller": "<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>"
})  %}
    <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 %}

Markup

<!-- 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 140 140" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Solicitud" focusable="false" role="img"><path d="M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z" fill="currentColor"/><path d="M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z" fill="currentColor"/><path d="M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p id="t5">Datos de la empresa</p>
        <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 -->

with custom icon

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

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% 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 140 140\" width=\"1em\" height=\"1em\" class=\"w-8 h-8 text-neutral-dark\" aria-label=\"Borrar\" focusable=\"false\" role=\"img\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M100.625 122.5h-61.25a8.75 8.75 0 0 1-8.75-8.75V35h78.75v78.75a8.75 8.75 0 0 1-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 0 0-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 0 0-8.75-8.75z\" stroke-width=\"8.749995\"/></g></svg>"
  },
  "caller": "<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>"
})  %}
    <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 %}

Markup

<!-- 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 140 140" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Borrar" focusable="false" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M100.625 122.5h-61.25a8.75 8.75 0 0 1-8.75-8.75V35h78.75v78.75a8.75 8.75 0 0 1-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 0 0-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 0 0-8.75-8.75z" stroke-width="8.749995"/></g></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p id="t6">Lista de admitidos y excluidos de la convocatoria publicado en el BOA</p>
        <p class="text-sm">
            <a class=" c-link break-all " href=" # ">http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</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 -->

draggable and with icon type document

Resolución de años anteriores

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

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% 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,
  "caller": "<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>"
})  %}
    <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 %}

Markup

<!-- 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 140 140" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Archivo" focusable="false" role="img"><path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor"/><path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p id="t7">Resolución de años anteriores</p>
        <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 -->

with classes, description, items, content and actions

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)

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% 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"
  },
  "caller": "<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>"
})  %}
    <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 %}

Markup

<!-- 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 class="font-bold" id="t8">Registro de alta de la asociación</p>
        <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 -->