# Patrones - Soporte. DESY. Sistema de diseño del Gobierno de Aragón.

## Patrones Índice de páginas

Patrones

# Soporte

Ayudar a resolver

Formas de contactar con el Gobierno de Aragón.

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

-   Escribiendo un correo electrónico a [soportesda@aragon.es](mailto:soportesda@aragon.es)

-   Rellenando este [Formulario de Solicitud de Soporte Técnico](https://aplicaciones.aragon.es/saco_core/formConsulta.action "Se abre en pestaña nueva")

-   Enviando un WhatsApp a [+34 973 901 905](whatsapp://send?phone=+34973901905&abid=+34973901905)

    Más información sobre el [canal WhatsApp](https://www.aragon.es/tramites/informacion-sobre-el-canal-whatsapp "Se abre en ventana nueva")

-   Llamando al teléfono [**976 289 414**](tel:+976289414).

    Horario de lunes a viernes de 8:00 a 18:00 (excepto verano y festivos).

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

## Contenido

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

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

```js
<h3 id="bloque-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 class="grid gap-base">
  <li class="flex">
    <div class="self-center">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" role="presentation" 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>
    </div>
    <p>Escribiendo un correo electrónico a <a class="c-link font-semibold" href="mailto:soportesda@aragon.es">soportesda@aragon.es</a></p>
  </li>
  <li class="flex">
    <div class="self-center">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" role="presentation" 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>
    </div>
    <p>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">
    <div class="self-center">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" role="presentation" 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>
    <div>
      <p class="mb-xs">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" title="Se abre en ventana nueva" 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">
    <div class="self-center">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" role="presentation" 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>
    <div>
      <p class="mb-xs">Llamando al teléfono <a class="c-link" href="tel:+976289414"><strong>976 289 414</strong></a>.</p>
      <p class="text-sm">Horario de lunes a viernes de 8:00 a 18:00 (excepto verano y festivos).</p>
    </div>
  </li>
</ul>
```

### HTML del ejemplo: includes/\_pattern.soporte.njk

```html
<h3 id="bloque-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 class="grid gap-base">
  <li class="flex">
    <div class="self-center">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" role="presentation" 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>
    </div>
    <p>Escribiendo un correo electrónico a <a class="c-link font-semibold" href="mailto:soportesda@aragon.es">soportesda@aragon.es</a></p>
  </li>
  <li class="flex">
    <div class="self-center">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" role="presentation" 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>
    </div>
    <p>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">
    <div class="self-center">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" role="presentation" 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>
    <div>
      <p class="mb-xs">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" title="Se abre en ventana nueva" 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">
    <div class="self-center">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" role="presentation" 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>
    <div>
      <p class="mb-xs">Llamando al teléfono <a class="c-link" href="tel:+976289414"><strong>976 289 414</strong></a>.</p>
      <p class="text-sm">Horario de lunes a viernes de 8:00 a 18:00 (excepto verano y festivos).</p>
    </div>
  </li>
</ul>
```

## Cuándo lo utilizamos [#](#cundo-lo-utilizamos)

-   Al final de una [página de preguntas frecuentes](patrones-pagina-otras.html#manual-con-preguntas-frecuentes)
-   En manuales de ayuda
-   En una página enlazable a través del pie de página
-   En un card o aviso en el lateral de un entorno que pueda resultar complejo o problemático

## Accesibilidad [#](#accesibilidad)

-   Se maqueta con una lista sin orden `<ul>`
-   Los iconos llevan el atributo`role="presentation"`
-   Los enlaces a teléfonos tienen el atributo `href="tel:[Número de teléfono]"`
-   Los teléfonos tienen que separarse en grupos de tres cifras
-   Evita las abreviaturas