desy-html

Status-item

Parámetros Nunjucks del componente: "Status-item". Versión: 12.0.1

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

        {"val":"params:\n- name: id\n  type: string\n  required: true\n  description: The id of the item.\n- name: title\n  type: object\n  required: false\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: hint\n  type: object\n  required: false\n  description: Options for the hint component.\n  isComponent: true\n- name: errorMessage\n  type: object\n  required: false\n  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.\n- name: errorId\n  type: string\n  required: false\n  description: Custom ID to add to the `aria-errormessage` attribute, used to provide additional descriptive information for screenreader users.\n- name: describedBy\n  type: string\n  required: false\n  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.\n- name: items\n  type: array\n  required: false\n  description: Description list items\n  params:\n  - name: term\n    type: object\n    required: true\n    description: term in dt.\n    - name: text\n      type: string\n      required: true\n      description: If `html` is set, this is not required. Text to use within each dt item. 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 each dt item. 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 dt.\n    - name: attributes\n      type: object\n      required: false\n      description: HTML attributes (for example data attributes) to add to the dt.\n  - name: definition\n    type: object\n    required: true\n    description: definition in dd.\n    - name: text\n      type: string\n      required: true\n      description: If `html` is set, this is not required. Text to use within each dd item. 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 each dd item. 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 dd.\n    - name: attributes\n      type: object\n      required: false\n      description: HTML attributes (for example data attributes) to add to the dd.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to a div container that contain the dt/dd pair.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to a div container that contain the dt/dd pair.\n- name: status\n  type: object\n  required: false\n  description: Options for the status component.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the status container div tag.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the container div 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.","length":4103}

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Status Item", versión: 12.0.1, 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: 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: desy-html.

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

<!-- status-item -->
<div id="default">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Título</p>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Modificar<span class='sr-only'> item del Título</span></button>
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->

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

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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


{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem ("{\"id\":\"default\",\"title\":{\"text\":\"Título\"}}") %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> item del Título</span></button>

{% endcall  %}

Título

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "default",
  "title": {
    "text": "Título"
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> item del Título</span></button>
{% endcall  %}

Por defecto sólo items

Ejemplo: "Por defecto sólo items", de código HTML, para maquetar el componente: "Status Item", versión: 12.0.1, 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: 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: desy-html.

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

<!-- status-item -->
<div id="only-items">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <dl>
        <div class="flex lg-flex-wrap">
          <dt class="w-1/2 my-sm">
            término
          </dt>
          <dd class="w-1/2 my-sm font-semibold">
            definición
          </dd>
        </div>
        <div class="flex lg-flex-wrap">
          <dt class="w-1/2 my-sm">
            término
          </dt>
          <dd class="w-1/2 my-sm font-semibold">
            definición
          </dd>
        </div>
        <div class="flex lg-flex-wrap">
          <dt class="w-1/2 my-sm">
            término
          </dt>
          <dd class="w-1/2 my-sm font-semibold">
            definición
          </dd>
        </div>
      </dl>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Modificar<span class='sr-only'> los datos de término y definición y el resto</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div>
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Estado
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false">
                <path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->

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

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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


{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem ("{\"id\":\"only-items\",\"items\":[{\"term\":{\"text\":\"término\"},\"definition\":{\"text\":\"definición\"}},{\"term\":{\"text\":\"término\"},\"definition\":{\"text\":\"definición\"}},{\"term\":{\"text\":\"término\"},\"definition\":{\"text\":\"definición\"}}],\"status\":{\"text\":\"Estado\",\"icon\":{\"type\":\"success\"}}}") %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> los datos de término y definición y el resto</span></button>

{% endcall  %}
término
definición
término
definición
término
definición

Estado

Mostrar códigodel ejemplo: Por defecto sólo items

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "only-items",
  "items": [
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      }
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      }
    },
    {
      "term": {
        "text": "término"
      },
      "definition": {
        "text": "definición"
      }
    }
  ],
  "status": {
    "text": "Estado",
    "icon": {
      "type": "success"
    }
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> los datos de término y definición y el resto</span></button>
{% endcall  %}

Con título html

Ejemplo: "Con título html", de código HTML, para maquetar el componente: "Status Item", versión: 12.0.1, 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: 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: desy-html.

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

<!-- status-item -->
<div id="with-title-html">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Autorización para la consulta de datos de las personas de la unidad familiar. <span class="text-neutral-dark">(Documento condicionado)</span></p>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->

Ejemplo: "Con título html", de código Nunjucks, para maquetar el componente: "Status Item", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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


{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem ("{\"id\":\"with-title-html\",\"title\":{\"html\":\"Autorización para la consulta de datos de las personas de la unidad familiar. <span class='text-neutral-dark'>(Documento condicionado)</span>\"}}") %}
<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>

{% endcall  %}

Autorización para la consulta de datos de las personas de la unidad familiar. (Documento condicionado)

Mostrar códigodel ejemplo: Con título html

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-title-html",
  "title": {
    "html": "Autorización para la consulta de datos de las personas de la unidad familiar. <span class='text-neutral-dark'>(Documento condicionado)</span>"
  }
}) %}
<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>
{% endcall  %}

Con pista

Ejemplo: "Con pista", de código HTML, para maquetar el componente: "Status Item", versión: 12.0.1, 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: 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: desy-html.

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

<!-- status-item -->
<div id="with-hint">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Personas de la unidad familiar</p>
      <!-- hint -->
      <p id="with-hint-hint" class="block text-neutral-dark">2 personas añadidas</p>
      <!-- /hint -->
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Modificar<span class='sr-only'> personas de la unidad familiar</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div>
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Aportado
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false">
                <path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->

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

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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


{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem ("{\"id\":\"with-hint\",\"title\":{\"text\":\"Personas de la unidad familiar\"},\"hint\":{\"text\":\"2 personas añadidas\"},\"status\":{\"text\":\"Aportado\",\"icon\":{\"type\":\"success\"}}}") %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> personas de la unidad familiar</span></button>

{% endcall  %}

Personas de la unidad familiar

2 personas añadidas

Aportado

Mostrar códigodel ejemplo: Con pista

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-hint",
  "title": {
    "text": "Personas de la unidad familiar"
  },
  "hint": {
    "text": "2 personas añadidas"
  },
  "status": {
    "text": "Aportado",
    "icon": {
      "type": "success"
    }
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> personas de la unidad familiar</span></button>
{% endcall  %}

Con pista html

Ejemplo: "Con pista html", de código HTML, para maquetar el componente: "Status Item", versión: 12.0.1, 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: 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: desy-html.

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

<!-- status-item -->
<div id="with-hint-html">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Autorización para la consulta de datos de las personas de la unidad familiar</p>
      <!-- hint -->
      <p id="with-hint-html-hint" class="block text-neutral-dark"><a href="#" class="c-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="inline-block self-center w-4 h-4 mr-sm no-underline" role="img" aria-hidden="true">
            <path d="M100.3 52.2a7.49 7.49 0 00-10.6 0L77.5 64.39V7.5a7.5 7.5 0 00-15 0v56.89L50.3 52.2a7.5 7.5 0 10-10.6 10.6l25 25a7.49 7.49 0 0010.6 0l25-25a7.49 7.49 0 000-10.6zM130 95a10 10 0 00-10 10v12.5a2.5 2.5 0 01-2.5 2.5h-95a2.5 2.5 0 01-2.5-2.5V105a10 10 0 00-20 0v15a20 20 0 0020 20h100a20 20 0 0020-20v-15a10 10 0 00-10-10z" fill="currentColor" />
          </svg>Descargar modelo</a></p>
      <!-- /hint -->
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->

Ejemplo: "Con pista html", de código Nunjucks, para maquetar el componente: "Status Item", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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


{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem ("{\"id\":\"with-hint-html\",\"title\":{\"text\":\"Autorización para la consulta de datos de las personas de la unidad familiar\"},\"hint\":{\"html\":\"<a href='#' class='c-link'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='inline-block self-center w-4 h-4 mr-sm no-underline' role='img' aria-hidden='true'><path d='M100.3 52.2a7.49 7.49 0 00-10.6 0L77.5 64.39V7.5a7.5 7.5 0 00-15 0v56.89L50.3 52.2a7.5 7.5 0 10-10.6 10.6l25 25a7.49 7.49 0 0010.6 0l25-25a7.49 7.49 0 000-10.6zM130 95a10 10 0 00-10 10v12.5a2.5 2.5 0 01-2.5 2.5h-95a2.5 2.5 0 01-2.5-2.5V105a10 10 0 00-20 0v15a20 20 0 0020 20h100a20 20 0 0020-20v-15a10 10 0 00-10-10z' fill='currentColor'/></svg>Descargar modelo</a>\"}}") %}
<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>

{% endcall  %}

Autorización para la consulta de datos de las personas de la unidad familiar

Descargar modelo

Mostrar códigodel ejemplo: Con pista html

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-hint-html",
  "title": {
    "text": "Autorización para la consulta de datos de las personas de la unidad familiar"
  },
  "hint": {
    "html": "<a href='#' class='c-link'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='inline-block self-center w-4 h-4 mr-sm no-underline' role='img' aria-hidden='true'><path d='M100.3 52.2a7.49 7.49 0 00-10.6 0L77.5 64.39V7.5a7.5 7.5 0 00-15 0v56.89L50.3 52.2a7.5 7.5 0 10-10.6 10.6l25 25a7.49 7.49 0 0010.6 0l25-25a7.49 7.49 0 000-10.6zM130 95a10 10 0 00-10 10v12.5a2.5 2.5 0 01-2.5 2.5h-95a2.5 2.5 0 01-2.5-2.5V105a10 10 0 00-20 0v15a20 20 0 0020 20h100a20 20 0 0020-20v-15a10 10 0 00-10-10z' fill='currentColor'/></svg>Descargar modelo</a>"
  }
}) %}
<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>
{% endcall  %}

Con estado simple

Ejemplo: "Con estado simple", de código HTML, para maquetar el componente: "Status Item", versión: 12.0.1, 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: 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: desy-html.

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

<!-- status-item -->
<div id="with-status-simple">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Datos adicionales del solicitante</p>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div>
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Iniciado
            </span>
            <span class="inline-block ml-sm">
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->

Ejemplo: "Con estado simple", de código Nunjucks, para maquetar el componente: "Status Item", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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


{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem ("{\"id\":\"with-status-simple\",\"title\":{\"text\":\"Datos adicionales del solicitante\"},\"status\":{\"text\":\"Iniciado\"}}") %}
<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>

{% endcall  %}

Datos adicionales del solicitante

Iniciado

Mostrar códigodel ejemplo: Con estado simple

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-simple",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "status": {
    "text": "Iniciado"
  }
}) %}
<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}

Con estado éxito

Ejemplo: "Con estado éxito", de código HTML, para maquetar el componente: "Status Item", versión: 12.0.1, 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: 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: desy-html.

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

<!-- status-item -->
<div id="with-status-success">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Datos adicionales del solicitante</p>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div>
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Aportado
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false">
                <path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->

Ejemplo: "Con estado éxito", de código Nunjucks, para maquetar el componente: "Status Item", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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


{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem ("{\"id\":\"with-status-success\",\"title\":{\"text\":\"Datos adicionales del solicitante\"},\"status\":{\"text\":\"Aportado\",\"icon\":{\"type\":\"success\"}}}") %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>

{% endcall  %}

Datos adicionales del solicitante

Aportado

Mostrar códigodel ejemplo: Con estado éxito

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-success",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "status": {
    "text": "Aportado",
    "icon": {
      "type": "success"
    }
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}

Con estado alerta

Ejemplo: "Con estado alerta", de código HTML, para maquetar el componente: "Status Item", versión: 12.0.1, 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: 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: desy-html.

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

<!-- status-item -->
<div id="with-status-alert" class="border-l-4 border-alert-base">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Datos adicionales del solicitante</p>
      <!-- error-message -->
      <p id="with-status-alert-error" class="block font-semibold text-alert-base my-sm text-alert-base">
        <span class="sr-only">Error:</span>Es necesario aportar este documento para enviar el trámite
      </p>
      <!-- /error-message -->
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div class="text-alert-base">
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Incompleto
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false">
                <path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->

Ejemplo: "Con estado alerta", de código Nunjucks, para maquetar el componente: "Status Item", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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


{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem ("{\"id\":\"with-status-alert\",\"title\":{\"text\":\"Datos adicionales del solicitante\"},\"errorMessage\":{\"text\":\"Es necesario aportar este documento para enviar el trámite\",\"classes\":\"my-sm text-alert-base\"},\"status\":{\"text\":\"Incompleto\",\"icon\":{\"type\":\"alert\"},\"classes\":\"text-alert-base\"},\"classes\":\"border-l-4 border-alert-base\"}") %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>

{% endcall  %}

Datos adicionales del solicitante

Error:Es necesario aportar este documento para enviar el trámite

Incompleto

Mostrar códigodel ejemplo: Con estado alerta

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-alert",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "errorMessage": {
    "text": "Es necesario aportar este documento para enviar el trámite",
    "classes": "my-sm text-alert-base"
  },
  "status": {
    "text": "Incompleto",
    "icon": {
      "type": "alert"
    },
    "classes": "text-alert-base"
  },
  "classes": "border-l-4 border-alert-base"
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}

Con estado cargando

Ejemplo: "Con estado cargando", de código HTML, para maquetar el componente: "Status Item", versión: 12.0.1, 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: 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: desy-html.

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

<!-- status-item -->
<div id="with-status-loading">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Datos adicionales del solicitante</p>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div>
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Subiendo (20%)
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" focusable="false">
                <path d="M71.15 2.3a7.7 7.7 0 100 15.4A52.3 52.3 0 1118.85 70a62.29 62.29 0 014.7-23.16l5.76 4a7.55 7.55 0 004.25 1.31 7.41 7.41 0 004.09-1.22 7.51 7.51 0 003.28-7.68L37 22.45a7.52 7.52 0 00-8.66-6l-21 3.65a7.5 7.5 0 00-3 13.57l6.21 4.27A77.78 77.78 0 003.45 70a67.7 67.7 0 1067.7-67.7z" fill="currentColor" />
                <path d="M91.15 92.5a7.45 7.45 0 01-3.35-.79l-20-10A7.51 7.51 0 0163.65 75V42.5a7.5 7.5 0 0115 0v27.87l15.86 7.92a7.5 7.5 0 01-3.36 14.21z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->

Ejemplo: "Con estado cargando", de código Nunjucks, para maquetar el componente: "Status Item", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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


{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem ("{\"id\":\"with-status-loading\",\"title\":{\"text\":\"Datos adicionales del solicitante\"},\"status\":{\"text\":\"Subiendo (20%)\",\"icon\":{\"type\":\"loading\"}}}") %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>

{% endcall  %}

Datos adicionales del solicitante

Subiendo (20%)

Mostrar códigodel ejemplo: Con estado cargando

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-loading",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "status": {
    "text": "Subiendo (20%)",
    "icon": {
      "type": "loading"
    }
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}

Con estado error

Ejemplo: "Con estado error", de código HTML, para maquetar el componente: "Status Item", versión: 12.0.1, 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: 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: desy-html.

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

<!-- status-item -->
<div id="with-status-error" class="border-l-4 border-alert-base">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <p class="my-sm">Datos adicionales del solicitante</p>
      <!-- error-message -->
      <p id="with-status-error-error" class="block font-semibold text-alert-base my-sm text-alert-base">
        <span class="sr-only">Error:</span>Se ha producido un error al subir el archivo
      </p>
      <!-- /error-message -->
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Ver<span class='sr-only'> datos adicionales del solicitante</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div class="text-alert-base">
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Error
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false">
                <path d="M70 75a7.5 7.5 0 007.5-7.5v-25a7.5 7.5 0 00-15 0v25A7.5 7.5 0 0070 75zM60 92.5a10 10 0 1020 0 10 10 0 10-20 0z" fill="currentColor" />
                <path d="M139.78 101.83L135 82.6a7.51 7.51 0 00-9.1-5.45l-19.22 4.8a7.5 7.5 0 00-2 13.71l6.11 3.66A55.31 55.31 0 0170 120.19a50.47 50.47 0 01-47.16-33.06 7.503 7.503 0 00-14.09 5.16A65.52 65.52 0 0070 135.19 71.27 71.27 0 00123.57 107l5.07 3a7.5 7.5 0 0011.14-8.25zM14.13 62.85l19.22-4.8a7.5 7.5 0 002.05-13.71L29.76 41A56.18 56.18 0 0170 19.81a50.47 50.47 0 0147.16 33.06 7.51 7.51 0 007 4.92 7.61 7.61 0 002.59-.46 7.51 7.51 0 004.46-9.62A65.52 65.52 0 0070 4.81 71.53 71.53 0 0016.83 33.2l-5.47-3.28A7.5 7.5 0 00.22 38.17L5 57.4a7.51 7.51 0 007.27 5.68 7.65 7.65 0 001.86-.23z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->

Ejemplo: "Con estado error", de código Nunjucks, para maquetar el componente: "Status Item", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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


{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem ("{\"id\":\"with-status-error\",\"title\":{\"text\":\"Datos adicionales del solicitante\"},\"errorMessage\":{\"text\":\"Se ha producido un error al subir el archivo\",\"classes\":\"my-sm text-alert-base\"},\"status\":{\"text\":\"Error\",\"icon\":{\"type\":\"error\"},\"classes\":\"text-alert-base\"},\"classes\":\"border-l-4 border-alert-base\"}") %}
<button class='c-button c-button--transparent'>Ver<span class='sr-only'> datos adicionales del solicitante</span></button>

{% endcall  %}

Datos adicionales del solicitante

Error:Se ha producido un error al subir el archivo

Error

Mostrar códigodel ejemplo: Con estado error

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-status-error",
  "title": {
    "text": "Datos adicionales del solicitante"
  },
  "errorMessage": {
    "text": "Se ha producido un error al subir el archivo",
    "classes": "my-sm text-alert-base"
  },
  "status": {
    "text": "Error",
    "icon": {
      "type": "error"
    },
    "classes": "text-alert-base"
  },
  "classes": "border-l-4 border-alert-base"
}) %}
<button class='c-button c-button--transparent'>Ver<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}

Con html en la definición

Ejemplo: "Con html en la definición", de código HTML, para maquetar el componente: "Status Item", versión: 12.0.1, 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: 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: desy-html.

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

<!-- status-item -->
<div id="with-html-in-definition">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <dl>
        <div class="flex lg-flex-wrap">
          <dt class="w-1/2 my-sm">
            Acreditación
          </dt>
          <dd class="w-1/2 my-sm font-semibold">
            Mediante archivo adjunto <a href="#" class="c-link inline-block">Modelo de solicitud (PDF, 200Kb)</a>
          </dd>
        </div>
      </dl>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Modificar<span class='sr-only'> acreditación</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div>
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Completo
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false">
                <path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->

Ejemplo: "Con html en la definición", de código Nunjucks, para maquetar el componente: "Status Item", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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


{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem ("{\"id\":\"with-html-in-definition\",\"items\":[{\"term\":{\"text\":\"Acreditación\"},\"definition\":{\"html\":\"Mediante archivo adjunto <a href='#' class='c-link inline-block'>Modelo de solicitud (PDF, 200Kb)</a>\"}}],\"status\":{\"text\":\"Completo\",\"icon\":{\"type\":\"success\"}}}") %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> acreditación</span></button>

{% endcall  %}
Acreditación
Mediante archivo adjunto Modelo de solicitud (PDF, 200Kb)

Completo

Mostrar códigodel ejemplo: Con html en la definición

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "with-html-in-definition",
  "items": [
    {
      "term": {
        "text": "Acreditación"
      },
      "definition": {
        "html": "Mediante archivo adjunto <a href='#' class='c-link inline-block'>Modelo de solicitud (PDF, 200Kb)</a>"
      }
    }
  ],
  "status": {
    "text": "Completo",
    "icon": {
      "type": "success"
    }
  }
}) %}
<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> acreditación</span></button>
{% endcall  %}

Incompleto

Ejemplo: "Incompleto", de código HTML, para maquetar el componente: "Status Item", versión: 12.0.1, 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: 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: desy-html.

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

<!-- status-item -->
<div id="incompleto-status-item" class="border-l-4 border-alert-base">
  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
    <div class="lg:w-2/3">
      <dl>
        <div class="flex lg-flex-wrap">
          <dt class="w-1/2 my-sm">
            Nombre
          </dt>
          <dd class="w-1/2 my-sm font-semibold">
            Ana
          </dd>
        </div>
        <div class="flex lg-flex-wrap">
          <dt class="w-1/2 my-sm">
            Apellidos
          </dt>
          <dd class="w-1/2 my-sm font-semibold">
            Pérez Escribano
          </dd>
        </div>
        <div class="flex lg-flex-wrap">
          <dt class="w-1/2 my-sm">
            Número de identificación
          </dt>
          <dd class="w-1/2 my-sm font-semibold">
            72882918B
          </dd>
        </div>
      </dl>
    </div>
    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
        <button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>
      </div>
      <div class="mb-base lg:mb-0 ml-base py-sm">
        <!-- status -->
        <div>
          <p class="inline-flex items-center">
            <span class="inline-block font-bold uppercase">
              Incompleto
            </span>
            <span class="inline-block ml-sm">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false">
                <path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor" />
              </svg>
            </span>
          </p>
        </div>
        <!-- /status -->
      </div>
    </div>
  </div>
</div>
<!-- /status-item -->

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

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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


{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem ("{\"id\":\"incompleto-status-item\",\"items\":[{\"term\":{\"text\":\"Nombre\"},\"definition\":{\"text\":\"Ana\"}},{\"term\":{\"text\":\"Apellidos\"},\"definition\":{\"text\":\"Pérez Escribano\"}},{\"term\":{\"text\":\"Número de identificación\"},\"definition\":{\"text\":\"72882918B\"}}],\"status\":{\"text\":\"Incompleto\",\"icon\":{\"type\":\"alert\"}},\"classes\":\"border-l-4 border-alert-base\"}") %}
<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>

{% endcall  %}
Nombre
Ana
Apellidos
Pérez Escribano
Número de identificación
72882918B

Incompleto

Mostrar códigodel ejemplo: Incompleto

Contenido

Nunjucks macro

{% from "components/status-item/_macro.status-item.njk" import componentStatusItem %}
{% call componentStatusItem({
  "id": "incompleto-status-item",
  "items": [
    {
      "term": {
        "text": "Nombre"
      },
      "definition": {
        "text": "Ana"
      }
    },
    {
      "term": {
        "text": "Apellidos"
      },
      "definition": {
        "text": "Pérez Escribano"
      }
    },
    {
      "term": {
        "text": "Número de identificación"
      },
      "definition": {
        "text": "72882918B"
      }
    }
  ],
  "status": {
    "text": "Incompleto",
    "icon": {
      "type": "alert"
    }
  },
  "classes": "border-l-4 border-alert-base"
}) %}
<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>
{% endcall  %}