Listbox

Mostrar parámetros

Parámetros del componente

              params:
- name: id
  type: string
  required: true
  description: The id of the listbox.
- name: isMultiselectable
  type: boolean
  required: false
  description: Defaults to false. If true, allows multiple selections.
- name: doesChangeButtonText
  type: boolean
  required: false
  description: Defaults to false. If true, the button text is updated with option selected text.
- name: text
  type: string
  required: true
  description: If `html` is set, this is not required. Text for the button. 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 for the button. If `html` is provided, the `text` argument will be ignored.
- name: label
  type: object
  required: true
  description: Label text or HTML by specifying value for either text or html keys.
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text for the button. 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 for the button. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the element that acts as label.
- name: classesContainer
  type: string
  required: false
  description: Classes to add to the container div of button and tooltip elements.
- name: classesTooltip
  type: string
  required: false
  description: Classes to add to the tooltip content.
- name: idPrefix
  type: string
  required: false
  description: String to prefix id for each item if no id is specified on each item. If not passed, fall back to using the name option instead.
- name: items
  type: array
  required: true
  description: Array of items objects.
  params:
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within each item. 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 each item. If `html` is provided, the `text` argument will be ignored.
  - name: id
    type: string
    required: false
    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
  - name: active
    type: boolean
    required: false
    description: If true, item will be active.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the item.
- name: classes
  type: string
  required: false
  description: Classes to add to the button element.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the button element.
              
            

Por defecto

Esto es un label

  • Option 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "default",
  "text": "Por defecto",
  "label": {
    "text": "Esto es un label"
  },
  "items": [
    {
      "href": "#",
      "html": "Option 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Con estado activo

Simula activar la pseudo-clase de CSS :active. En realidad sólo se usa para documentar estos ejemplos.

Esto es un label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Mostrar códigodel ejemplo: Con estado activo

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "with-active-state",
  "text": "Activo",
  "label": {
    "text": "Esto es un label"
  },
  "classes": "ds-active",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Con estado hover

Simula activar la pseudo-clase de CSS :hover. En realidad sólo se usa para documentar estos ejemplos.

Esto es un label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Mostrar códigodel ejemplo: Con estado hover

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "with-hover-state",
  "text": "Hover",
  "label": {
    "text": "Esto es un label"
  },
  "classes": "ds-hover",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Con estado focus

Simula activar la pseudo-clase de CSS :focus. En realidad sólo se usa para documentar estos ejemplos.

Esto es un label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Mostrar códigodel ejemplo: Con estado focus

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "with-focus-state",
  "text": "Focus",
  "label": {
    "text": "Esto es un label"
  },
  "classes": "ds-focus",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Primario

Para acciones primarias.

Esto es un label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Mostrar códigodel ejemplo: Primario

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "primary",
  "text": "Primario",
  "label": {
    "text": "Esto es un label"
  },
  "classes": "c-listbox--primary",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Transparente

Esto es un label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Mostrar códigodel ejemplo: Transparente

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "transparent",
  "text": "Transparente",
  "label": {
    "text": "Esto es un label"
  },
  "classes": "c-listbox--transparent",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Con estilos de cabecera

Esto es un label

Mostrar códigodel ejemplo: Con estilos de cabecera

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "header",
  "text": "Header",
  "label": {
    "text": "Esto es un label",
    "classes": "sr-only"
  },
  "classes": "c-listbox--header",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Peque

Label solo visible para lectores de pantalla.

Esto es un label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Mostrar códigodel ejemplo: Peque

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "small",
  "text": "Peque con texto muy largo",
  "label": {
    "text": "Esto es un label",
    "classes": "sr-only"
  },
  "classes": "c-listbox--sm",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Peque tiene selección

Un botón con una selección aplicada se muestra con color. Label solo visible para lectores de pantalla.

Esto es un label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Mostrar códigodel ejemplo: Peque tiene selección

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "small-has-selection",
  "text": "Peque con texto muy largo",
  "label": {
    "text": "Esto es un label",
    "classes": "sr-only"
  },
  "classes": "c-listbox--has-selection c-listbox--sm",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Deshabilitado

Esto es un label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Mostrar códigodel ejemplo: Deshabilitado

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "disabled",
  "text": "Deshabilitado",
  "label": {
    "text": "Esto es un label"
  },
  "disabled": true,
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Con clases de css aplicadas al container

Tanto el botón como los elementos del tooltip están rodeados de un div contenedor al que se le pueden aplicar estilos de CSS.

Esto es un label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Mostrar códigodel ejemplo: Con clases de css aplicadas al container

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "classes-applied-to-container-element",
  "text": "Clases en container",
  "label": {
    "text": "Esto es un label"
  },
  "classesContainer": "inline-block p-base bg-primary-light",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Clases aplicadas al contenido del tooltip

El contenido del tooltip puede tener clases adicionales aplicadas. En este ejemplo se le ha aplicado una altura máxima y scroll vertical si el contenido se desborda.

Esto es un label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Mostrar códigodel ejemplo: Clases aplicadas al contenido del tooltip

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "classes-applied-to-tooltip-content",
  "text": "Clases al contenido del tooltip",
  "label": {
    "text": "Esto es un label"
  },
  "classesTooltip": "max-h-24 overflow-y-auto",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Clases aplicadas a varios elementos

En este ejemplo, usando clases de CSS, la anchura del contenido establece la anchura del tooltip.

Esto es un label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Mostrar códigodel ejemplo: Clases aplicadas a varios elementos

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "classes-applied-to-various-elements",
  "text": "Listbox de anchura completa",
  "label": {
    "text": "Esto es un label",
    "classes": "font-semibold text-sm"
  },
  "classes": "w-full justify-between",
  "classesTooltip": "w-max max-h-64 overflow-y-auto",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Con item activo

Esto es un label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4 activa
  • Opción 5
Mostrar códigodel ejemplo: Con item activo

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "with-active-item",
  "text": "con item activo",
  "label": {
    "text": "Esto es un label"
  },
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4 activa",
      "active": true
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Permite selecciones múltiples

Usa el parámetro "isMultiselectable": true.

Esto es un label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Mostrar códigodel ejemplo: Permite selecciones múltiples

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "is-multiselectable",
  "isMultiselectable": true,
  "text": "Selecciones múltiples",
  "label": {
    "text": "Esto es un label"
  },
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Cambia el texto del botón

Usa el parámetro "doesChangeButtonText": true para hacer que el texto del botón se actualice al seleccionar un item. Si "doesChangeButtonText": true, entonces no tiene efecto

Esto es un label

  • Option 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Mostrar códigodel ejemplo: Cambia el texto del botón

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "does-change-button-text",
  "text": "Opción 1",
  "label": {
    "text": "Esto es un label"
  },
  "doesChangeButtonText": true,
  "items": [
    {
      "href": "#",
      "html": "Option 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ]
}) }}

Con iconos en items

Esto es un label

  • Opción 1
  • Opción 2
  • Opción 3
Mostrar códigodel ejemplo: Con iconos en items

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "icons",
  "text": "Iconos en items",
  "label": {
    "text": "Esto es un label"
  },
  "items": [
    {
      "href": "#",
      "html": "Opción 1 <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"inline-block align-baseline ml-sm\" 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>"
    },
    {
      "href": "#",
      "html": "Opción 2 <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"inline-block align-baseline ml-sm\" 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>"
    },
    {
      "href": "#",
      "html": "Opción 3 <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"inline-block align-baseline ml-sm\" 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>"
    }
  ]
}) }}

Con párrafos en items

Esto es un label

  • Actuaciones previas/preparatorias

    Consulta previa, actos preparatorios de expediente, bases reguladoras...

  • Inicio de la tramitación

    Solicitud, subsanación, declaración responsable, aprobación expediente...

  • Otros trámites en fase de inicio

    Documentos que no se puedan asociar a ningún otro tramite en fase de inicio

  • Participación pública

    Información pública, alegaciones, audiencia...

  • Informes sectoriales

    Informes sectoriales que se emiten en la tramitación por órganos distintos del instructor...

  • Valoración/Prueba/Licitación

    Informe de valoración, documentos técnicos de evaluación, peticiones de prueba, documentos fase de licitación, informes propuesta...

Mostrar códigodel ejemplo: Con párrafos en items

Contenido

Nunjucks macro

{% from "components/listbox/_macro.listbox.njk" import componentListbox %}

{{ componentListbox({
  "id": "paragraphs",
  "text": "Párrafos en items",
  "label": {
    "text": "Esto es un label"
  },
  "items": [
    {
      "href": "#",
      "html": "Actuaciones previas/preparatorias <p class=\"text-xs font-normal pointer-events-none\">Consulta previa, actos preparatorios de expediente, bases reguladoras...</p>",
      "classes": "flex-wrap"
    },
    {
      "href": "#",
      "html": "Inicio de la tramitación <p class=\"text-xs font-normal pointer-events-none\">Solicitud, subsanación, declaración responsable, aprobación expediente...</p>",
      "classes": "flex-wrap"
    },
    {
      "href": "#",
      "html": "Otros trámites en fase de inicio <p class=\"text-xs font-normal pointer-events-none\">Documentos que no se puedan asociar a ningún otro tramite en fase de inicio</p>",
      "classes": "flex-wrap"
    },
    {
      "href": "#",
      "html": "Participación pública <p class=\"text-xs font-normal pointer-events-none\">Información pública, alegaciones, audiencia...</p>",
      "classes": "flex-wrap"
    },
    {
      "href": "#",
      "html": "Informes sectoriales <p class=\"text-xs font-normal pointer-events-none\">Informes sectoriales que se emiten en la tramitación por órganos distintos del instructor...</p>",
      "classes": "flex-wrap"
    },
    {
      "href": "#",
      "html": "Valoración/Prueba/Licitación <p class=\"text-xs font-normal pointer-events-none\">Informe de valoración, documentos técnicos de evaluación, peticiones de prueba, documentos fase de licitación, informes propuesta...</p>",
      "classes": "flex-wrap"
    }
  ]
}) }}