DESY

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

Volver

Índice de apartados de esta página

Información

Los patrones de información son bloques informativos de uso común para comunicar a las personas usuarias.

Índice de apartados de esta página

Política de cookies

Una notificación que informa y permite gestionar el uso de cookies del sitio web. Si se trata de una web destinada al uso de la persona ciudadana, siempre debe mostrar la política de cookies. En el caso de las aplicaciones internas no necesitamos incluir esta información.

Si tu web tiene actividad económica y finalidad lucrativa

Debe llevar banner de cookies que te obligue a aceptarlas o rechazarlas.

Mostrar código del ejemplo: includes/_pattern.cookies.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.cookies.njk

{% from "components/notification/_macro.notification.njk" import componentNotification %}
{% from "components/button/_macro.button.njk" import componentButton %}
{% from "components/dialog/_macro.dialog.njk" import componentDialog %}
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}

{% set description %}
  <div class="mt-lg">
    <p class="c-paragraph-lg">Este sitio web utiliza cookies propias y de terceros para garantizar su correcto funcionamiento. Esto implica la realización de tratamientos de datos de carácter personal con arreglo a la normativa europea y española aplicables.</p>
    <p class="c-paragraph-lg">Para más información consulta nuestra <a href="#" class="c-link inline-block"  title="Se abre en ventana nueva" target="_blank">política de cookies<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a></p>
    <ul class="w-full flex flex-wrap gap-sm mt-lg">
      <li>
        {{ componentButton({
          "text": "Aceptar todas",
          "classes": "c-button--primary"
        }) }}
      </li>
      <li>
        {% call componentDialog({
          "button": {
            "text": "Configurar preferencias",
            "classes":"c-button--transparent",
            "attributes": {
              "onclick": "openDialog('secondary', this, 'label-secondary-action-example')",
              "id": "button-label-secondary-action-example"
            }
          },
          "id": "secondary",
          "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
          "attributes": {
            "role": "dialog",
            "aria-labelledby": "secondary-action-example",
            "aria-modal": true
          }
        }) %}
        <!-- modal -->
        <div id="secondary-action-example" class="mt-16 sm:mt-0 relative max-w-2xl mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
          <h2 id="label-secondary-action-example" class="c-h2 focus:outline-none focus:underline pr-lg" tabindex="-1">Configuración de mis preferencias en relación a las cookies</h2>
          <p class="c-paragraph-base my-base">Selecciona que cookies quieres habilitar y guarda los cambios. Puedes volver a cambiar tu configuración accediendo a ese panel.</p>
          <div>
            <div class="flex gap-lg">
              <div class="grow">
                <h3 class="c-h4" id="text1">Cookies técnicas</h3>
                <p class="c-paragraph-sm">Las cookies técnicas o necesarias son esenciales para que nuestra web pueda funcionar correctamente e incluye funcionalidades básicas como identificar la sesión. Por estos motivos las cookies técnicas no se pueden desactivar.</p>
              </div>
              <div>
                {{ componentToggle({
                  "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
                  "isSwitch": true,
                  "pressed": true,
                  "offState": {
                    "classes": "",
                    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm\" aria-hidden=\"true\">Off</span><span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">Off</span><span aria-hidden=\"true\" class=\"translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\"></span></span><span class=\"text-sm\" aria-hidden=\"true\">On</span></span>"
                  },
                  "onState": {
                    "classes": "",
                    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm\" aria-hidden=\"true\">Off</span><span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">On</span><span aria-hidden=\"true\" class=\"translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\"></span></span><span class=\"text-sm\" aria-hidden=\"true\">On</span></span>"
                  },
                  "attributes": {
                    "aria-labelledby": "text1",
                    "id":"toggle1"
                  }
                }) }}
              </div>
            </div>
            <div class="flex gap-lg mt-base">
              <div class="grow">
                <h3 class="c-h4" id="text2">Cookies personalización</h3>
                <p class="c-paragraph-sm">Al utilizar cookies de personalización, la página web puede recordar información durante tu tiempo de navegación asociada a la forma en que la página se comporta o el aspecto que tiene.</p>
              </div>
              <div>
                {{ componentToggle({
                  "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
                  "isSwitch": true,
                  "offState": {
                    "classes": "",
                    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm\" aria-hidden=\"true\">Off</span><span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">Off</span><span aria-hidden=\"true\" class=\"translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\"></span></span><span class=\"text-sm\" aria-hidden=\"true\">On</span></span>"
                  },
                  "onState": {
                    "classes": "",
                    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm\" aria-hidden=\"true\">Off</span><span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">On</span><span aria-hidden=\"true\" class=\"translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\"></span></span><span class=\"text-sm\" aria-hidden=\"true\">On</span></span>"
                  },
                  "attributes": {
                    "aria-labelledby": "text2",
                    "id":"toggle2"
                  }
                }) }}
              </div>
            </div>
          </div>
          <ul class="flex flex-wrap w-full justify-between gap-sm mt-lg">
             <li class="mt-sm">
              <!-- button -->
              <button class="c-button c-button--primary"  onclick="closeDialog(this)">
                Guardar configuración
              </button>
              <!-- /button -->
            </li>
            <li class="mt-sm">
              <!-- button -->
              <button class="c-button"  onclick="closeDialog(this)">
                Cancelar <span class="sr-only">y cerrar la ventana modal</span>
              </button>
              <!-- /button -->
            </li>
          </ul>
          <div class="absolute top-0 right-0 p-sm lg:p-base">
            <button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar la ventana emergente" type="button">
              <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" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
            </button>
          </div>
        </div>
        <!-- /modal -->
        {% endcall  %}
      </li>
    </ul>
  </div>
{% endset %}

{{ componentNotification({
  "headingLevel": 4,
  "title": {
    "html": '<span class="c-h1">Gestión de cookies</span>'
  },
  "description": {
    "html": description | safe
  },
  "id": "banner-cookies"
})  }}

Si tu web no tiene actividad económica ni finalidad lucrativa

Debes mostrar una notificación que avise al usuario.

Uso de cookies

Usamos cookies para que la aplicación funcione. Para más información consulta nuestra política de cookies

Mostrar código del ejemplo: includes/_pattern.cookies-simple.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.cookies-simple.njk

{% from "components/notification/_macro.notification.njk" import componentNotification %}


<div>
  {{ componentNotification({
      "title": {
        "html": "Uso de cookies"
      },
      "description": {
        "html": 'Usamos cookies para que la aplicación funcione. Para más información consulta nuestra <a class="c-link" href="https://www.aragon.es/-/detalle-sobre-las-cookies-en-el-portal-de-servicios-del-gobierno-de-aragon">política de cookies<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a>'
      },
      "id": "cookies-2",
      "isDismissible": true
  })  }}
</div>

Soporte

Este bloque suele usarse al final de una página de preguntas frecuentes, en manuales de ayuda o para informar de un error.

Soporte técnico

Si encuentras algún error, tienes alguna duda o quieres proponer alguna mejora, puedes ponerte en contacto con el Soporte Técnico de Servicios Digitales de Aragón.

Mostrar código del ejemplo: includes/_pattern.soporte.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.soporte.njk

<h3 id="soporte" class="c-h2 group">Soporte técnico</h3>
<p class="c-paragraph-base">Si encuentras algún error, tienes alguna duda o quieres proponer alguna mejora, puedes ponerte en contacto con el Soporte Técnico de Servicios Digitales de Aragón.</p>
<ul>
  <li class="flex">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" aria-hidden="true" focusable="false" class="w-5 h-5 mr-base"><path d="M12.5 1.25h-11A1.5 1.5 0 0 0 0 2.75v8.5a1.5 1.5 0 0 0 1.5 1.5h11a1.5 1.5 0 0 0 1.5-1.5v-8.5a1.5 1.5 0 0 0-1.5-1.5Zm-.11 4.14-4 2.4a2.71 2.71 0 0 1-2.8 0l-4-2.4a.75.75 0 0 1 .78-1.28l4 2.39a1.22 1.22 0 0 0 1.24 0l4-2.39a.75.75 0 0 1 .78 1.28Z" fill="currentColor" transform="scale(3.42857)"></path></svg>
    <p class="c-paragraph-base">Escribiendo un correo electrónico a <a class="c-link font-semibold" href="mailto:soportesae@aragon.es">soportesae@aragon.es</a></p>
  </li>
  <li class="flex">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" aria-hidden="true" focusable="false" class="w-5 h-5 mr-base"><path d="m5.3 9 2.54-.5a.44.44 0 0 0 .27-.14l5.6-5.59a1 1 0 0 0 0-1.42L12.65.29a1 1 0 0 0-1.42 0l-5.59 5.6a.44.44 0 0 0-.14.27l-.44 2.49a.22.22 0 0 0 .07.22.23.23 0 0 0 .17.13Z" fill="currentColor" transform="scale(3.42857)"></path><path d="M9.17 9.42A1.92 1.92 0 0 1 8.1 10l-2.78.47a1.73 1.73 0 0 1-1.23-.51 1.77 1.77 0 0 1-.51-1.56L4 5.89a1.93 1.93 0 0 1 .56-1.06L6 3.43a.26.26 0 0 0 0-.28.25.25 0 0 0-.2-.15H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5V8.2a.25.25 0 0 0-.15-.2.26.26 0 0 0-.28 0Z" fill="currentColor" transform="scale(3.42857)"></path></svg>
    <p class="c-paragraph-base">Rellenando este <a class="c-link font-semibold" href="https://aplicaciones.aragon.es/saco_core/formConsulta.action" target="_blank" title="Se abre en pestaña nueva">Formulario de Solicitud de Soporte Técnico<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a></p>
  </li>
  <li class="flex items-center mb-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" aria-hidden="true" focusable="false" class="w-5 h-5 mr-base"><path d="M12 .09A12 12 0 0 0 0 12a11.73 11.73 0 0 0 2.14 6.77l-1.36 4a.51.51 0 0 0 .12.51.5.5 0 0 0 .51.12l4.19-1.33A11.94 11.94 0 1 0 12 .09Zm7.2 16.72a3.9 3.9 0 0 1-3.5 2.09 10.81 10.81 0 0 1-3.46-1 13.88 13.88 0 0 1-5.94-5.16c-1.92-2.53-2-4.9-.17-6.86a2.21 2.21 0 0 1 1.92-.56 1.53 1.53 0 0 1 1.2.88l.39.92.63 1.51a1.1 1.1 0 0 1 0 1 5.19 5.19 0 0 1-1 1.37 12.83 12.83 0 0 0 1.8 2.14 9 9 0 0 0 2.73 1.64c.28-.37.82-1 1-1.28a1 1 0 0 1 1.34-.35c.38.13 2.51 1.18 2.51 1.18a1.37 1.37 0 0 1 .68.49 2 2 0 0 1-.13 1.99Z" fill="currentColor" transform="scale(2)"></path></svg>
    <div>
      <p>Enviando un WhatsApp a <a href="whatsapp://send?phone=+34973901905&amp;abid=+34973901905" aria-label="+34 973 901 905 (soporte técnico por WhatsApp)" class="c-link font-semibold">+34 973 901 905</a>.</p>
      <p class="text-sm">Más información sobre el <a target="_blank" class="c-link font-semibold" href="https://www.aragon.es/tramites/informacion-sobre-el-canal-whatsapp">canal WhatsApp<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a></p>
    </div>
  </li>
  <li class="flex items-center">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" aria-hidden="true" focusable="false" class="w-5 h-5 mr-base"><path d="M8.89 13.46a3.44 3.44 0 0 0 4.29-.46l.48-.48a1.14 1.14 0 0 0 0-1.62l-2-2a1.14 1.14 0 0 0-1.62 0 1.14 1.14 0 0 1-1.62 0L5.14 5.61a1.14 1.14 0 0 1 0-1.61 1.14 1.14 0 0 0 0-1.62l-2-2a1.14 1.14 0 0 0-1.62 0L1 .82a3.45 3.45 0 0 0-.46 4.29 31.29 31.29 0 0 0 8.35 8.35Z" fill="currentColor" transform="scale(3.42857)"></path></svg>
    <div>
      <p>Llamando al teléfono <a class="font-semibold">976 289 414</a>.</p>
      <p class="text-sm">Horario de lunes a jueves de 7:30 a 18:30, y los viernes de 7:30 a 16:00 (excepto verano y festivos).</p>
    </div>
  </li>
</ul>