desy-html 7.2.0 → 7.3.1

package/docs/_include.template-header.njk

@@ -25,6 +25,10 @@
     {
       text: "Componentes",
       href: "componentes.html"
+    },
+    {
+      text: "Plantillas",
+      href: "plantillas.html"
     }],
     attributes: {
       "aria-label": "Navegación principal"
@@ -58,6 +62,10 @@
         {
           text: "Componentes",
           href: "componentes.html"
+        },
+        {
+          text: "Plantillas",
+          href: "plantillas.html"
         }],
         attributes: {
           "aria-label": "Navegación principal"

package/docs/index.html

@@ -38,6 +38,14 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.7.3.1</h3>
+  <ul class="text-sm">
+    <li>Added source code links to Plantillas pages.</li>
+  </ul>
+  <h3>v.7.3.0</h3>
+  <ul class="text-sm">
+    <li>Added desy-html-starter page templates and Plantillas page.</li>
+  </ul>
   <h3>v.7.2.0</h3>
   <ul class="text-sm">
     <li>Removed cdn links for popper and tippy.</li>

package/docs/pagina-accesibilidad.html

@@ -0,0 +1,110 @@
+{% set title = "Accesibilidad. Título de app. Gobierno de Aragón" %}
+{% extends "pages/_template.logged-out.njk" %}
+
+{% block contentBlock %}
+  <div class="pb-lg"></div>
+  <div class="prose">
+    <h1>Accesibilidad</h1>
+    <p class="text-lg mb-0">
+      Plantilla en desy-html: src/templates/pages/_template.logged-out.njk
+    </p>
+    <p class="text-lg mt-0">
+      <a href="https://bitbucket.org/sdaragon/desy-html/src/master/docs/pagina-accesibilidad.html" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta página<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
+    </p>
+    <p class="text-lg">El Gobierno de Aragón se ha comprometido a hacer accesible su sitio web, de conformidad con el <a href="#">Real Decreto 1112/2018, de 7 de septiembre, sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público</a>.</p>
+    <p class="text-lg">La presente declaración de accesibilidad se aplica al <a href="#">sitio web actual aragon.es</a> (los subdominios de este sitio web tendrán sus propias declaraciones de accesibilidad).</p>
+  </div>
+  <div class="py-xl"></div>
+  <div class="prose">
+    <h2>Situación de cumplimiento</h2>
+    <p>Este sitio web es parcialmente conforme con el Real Decreto 1112/2018, de 7 de septiembre, debido a las excepciones y falta de conformidad de los aspectos que se indican a continuación.</p>
+
+    <h2>Contenido no accesible</h2>
+    <p>Estamos trabajando para que el portal alcance el máximo nivel de accesibilidad, pero algunos contenidos no son todavía plenamente accesibles por las razones que se recogen a continuación.</p>
+    <ol>
+      <li>
+        <h3>Falta de conformidad con el Real Decreto 1112/2018</h3>
+        <ul>
+          <li>algunas tablas pueden presentar problemas porque están pendientes de adaptar a la nueva normativa [requisito número 9.1.3.1]</li>
+          <li>algunas páginas que recogen enlaces de órdenes, decretos, etc. (normativa) tienen una longitud excesiva lo que puede dar problemas relacionados con el propósito de los enlaces [requisito número 9.2.4.4]</li>
+          <li>debido al gestor de contenidos empleado en este portal surgen errores en el procesamiento de las hojas CSS [requisitos número 9.1.3.1. y número 9.4.1.1]</li>
+        </ul>
+        <p>Actualmente contamos con un equipo de revisión que está subsanando estos errores.</p>
+        <p>Podrían existir archivos ofimáticos en PDF, u otros formatos, publicados después del 20 de septiembre de 2018, que no cumplan en su totalidad todos los requisitos de accesibilidad.</p>
+        <p>Los archivos ofimáticos en PDF, u otros formatos, vinculados en este portal y que son responsabilidad de terceros, podrían no ser accesibles.</p>
+        <p>Los documentos PDF, firmados electrónicamente con anterioridad al 20 de septiembre de 2018, no son accesibles. Si algún ciudadano o ciudadana está interesada en la accesibilidad de alguno de estos documentos, puede solicitarlo a <a href="mailto:portalpublico@aragon.es">portalpublico@aragon.es</a>, y le enviaremos el texto en un documento accesible, a la mayor brevedad.</p>
+      </li>
+      <li>
+        <h3>Carga desproporcionada</h3>
+        <p>No aplica.</p>
+      </li>
+      <li>
+        <h3>El contenido no entra dentro del ámbito de la legislación aplicable</h3>
+        <p>Podrían existir archivos ofimáticos en PDF, u otros formatos, publicados antes del 20 de septiembre de 2018, que no cumplan en su totalidad todos los requisitos de accesibilidad.</p>
+        <p>Los mapas de ubicación de los organismos podrían no ser plenamente accesibles, pero se incluye junto a los mismos la información esencial de manera accesible.</p>
+      </li>
+    </ol>
+
+    <h2>Preparación de la presente declaración de accesibilidad</h2>
+    <p>La presente declaración fue preparada el 24/05/2019 tras una auditoría externa mediante evaluación manual y automática de las páginas a las que aplica.</p>
+
+    <p>Última revisión de la declaración: 24/01/2020.</p>
+
+    <h2>Observaciones y datos de contacto</h2>
+    <p>Puede realizar comunicaciones sobre requisitos de accesibilidad (artículo 10.2.a) del Real Decreto 1112/2018, de 7 de septiembre) como, por ejemplo:</p>
+    <ul>
+      <li>Informar sobre cualquier posible incumplimiento por parte de este sitio web.</li>
+      <li>Transmitir otras dificultades de acceso al contenido.</li>
+      <li>Formular cualquier otra consulta o sugerencia de mejora relativa a la accesibilidad del sitio web.</li>
+    </ul>
+
+    <p>A través de las siguientes vías:</p>
+    <ul>
+      <li>Correo electrónico: <a href="mailto:portalpublico@aragon.es">portalpublico@aragon.es</a>.</li>
+      <li><a href="#">Trámite de quejas y sugerencias</a> sobre el funcionamiento de los servicios públicos gestionados por la Diputación General de Aragón.</li>
+      <li>Teléfono: 976 713 728.</li>
+    </ul>
+
+    <h2>Procedimiento de aplicación</h2>
+    <p>El procedimiento de reclamación recogido en el artículo 13 del Real Decreto 1112/2018, de 7 de septiembre, entrará en vigor el 20 de septiembre de 2020.</p>
+
+    <h2>Acciones de mejora de la accesibilidad</h2>
+    <p>El Gobierno de Aragón quiere mejorar la accesibilidad del portal más allá del nivel de exigido por el Real Decreto 1112/2018, por ello se han dado los siguientes pasos:</p>
+    <ol>
+      <li>
+        <h3>Cumplimiento de requisitos de accesibilidad de nivel AAA</h3>
+        <p>Actualmente cumplen con el nivel AAA de la <a href="http://administracionelectronica.gob.es/PAe/accesibilidad/une-en-301549-2019.pdf">norma UNE-EN 301549 (PDF, 2,21 MB)</a> las siguientes páginas del portal:</p>
+        <ul>
+          <li><a href="#">Home</a>.</li>
+          <li><a href="#">Actualidad</a>.</li>
+          <li><a href="#">Buscador</a>.</li>
+          <li>Páginas de Temas, Subtemas y Organismos.</li>
+        </ul>
+        <p>La paleta de colores utilizada cumple con el nivel AAA.</p>
+      </li>
+      <li>
+        <h3>Inclusión de la tecnología Texto a voz</h3>
+        <p>La herramienta de código abierto "text to speech" permite escuchar el contenido del portal o descargarlo en formato .mp3.</p>
+        <p>Puede acceder a esta funcionalidad en las páginas interiores del portal mediante el icono situado antes del contenido.</p>
+      </li>
+      <li>
+        <h3>Selección de estilos visuales</h3>
+        <p>La programación del portal se ha realizado utilizando hojas de estilo (CSS). Si el navegador o dispositivo de navegación no soporta hojas de estilo, la página web sigue siendo legible gracias a su marcación estructural.</p>
+        <p>En la cabecera de las páginas puede aumentar o disminuir el tamaño de letra mediante las siguientes opciones:</p>
+        <ul>
+          <li>[icono de la web A+]: disminuye el tamaño del texto.</li>
+          <li>[icono de la web A-]: aumenta el tamaño del texto.</li>
+        </ul>
+      </li>
+      <li>
+        <h3>Visualización Responsive</h3>
+        <p>El portal ha sido diseñado para su óptima visualización en los dispositivos tablet y móvil.</p>
+      </li>
+    </ol>
+
+
+
+
+  </div>
+
+{% endblock %}

package/docs/pagina-mapa-web.html

@@ -0,0 +1,137 @@
+{% set title = "Mapa web. Título de app. Gobierno de Aragón" %}
+{% extends "pages/_template.logged-out.njk" %}
+
+{% block contentBlock %}
+  <div class="pb-lg"></div>
+  <div class="prose">
+    <h1>Mapa web</h1>
+    <p class="text-lg mb-0">
+      Plantilla en desy-html: src/templates/pages/_template.logged-out.njk
+    </p>
+    <p class="text-lg mt-0">
+      <a href="https://bitbucket.org/sdaragon/desy-html/src/master/docs/pagina-mapa-web.html" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta página<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
+    </p>
+    <p class="text-lg">Colección de las secciones principales de este sitio web y sus subsecciones.</p>
+  </div>
+  <div class="py-xl"></div>
+  <div class="mb-xl">
+    <h2 class="c-h2 group"><a href="#" class="c-link">Categorías de trámites</a></h2>
+    <div class="prose mb-base">
+      <p>
+        Listado de categorías en las que se ordenan los trámites.
+      </p>
+    </div>
+    <ul>
+      <li class="mb-base">
+        <a class="c-link" href="#">Actividades industriales y energía</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Atención social y dependencia</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Cultura, ocio y turismo</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Derechos y servicios de ciudadano</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Educación, investigación y desarrollo</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Empleo y trabajo</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Empresa, comercio y asociaciones</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Infraestructuras, transportes y carreteras</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Medio ambiente</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Medio rural, agricultura y ganadería</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Salud</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Vivienda</a>
+      </li>
+    </ul>
+  </div>
+  <div class="mb-xl">
+    <h2 class="c-h2 group"><a href="#" class="c-link">Servicios de la Sede electrónica</a></h2>
+    <div class="prose mb-base">
+      <p>
+        Listado completo de servicios que ofrecemos.
+      </p>
+    </div>
+    <ul>
+      <li class="mb-base">
+        <a class="c-link" href="#">Cita previa</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Carpeta Ciudadana</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Registro electrónico general de la Administración</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Subsanación o mejora de la solicitud de inicio de un procedimiento</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Aportación de documentos a procedimientos en trámite</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Notificaciones electrónicas</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Verificador CSV de documentos</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Interposición de recursos ante la Administración</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Sellos de órgano</a>
+      </li>
+    </ul>
+  </div>
+  <div class="mb-xl">
+    <h2 class="c-h2 group">Información y ayuda para la tramitación</h2>
+    <ul>
+      <li class="mb-base">
+        <a class="c-link" href="#">Preguntas frecuentes</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Guía de tramitación</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Oficinas de información y Registro</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Contacto y ayuda técnica</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="#">Sobre la Sede Electrónica del Gobierno de Aragón</a>
+      </li>
+    </ul>
+  </div>
+  <div class="mb-xl">
+    <h2 id="accesibilidad" class="c-h2"><a href="#" class="c-link">Accesibilidad</a></h2>
+    <div class="prose mb-base">
+      <p>
+        Conoce el nivel de accesibilidad de la web y obtén información adicional al respecto.
+      </p>
+    </div>
+  </div>
+  <div class="mb-xl">
+    <h2 id="mapa-web" class="c-h2"><a href="#" class="c-link">Mapa web</a></h2>
+    <div class="prose mb-base">
+      <p>
+        Colección de las secciones principales de este sitio web y sus subsecciones.
+      </p>
+    </div>
+  </div>
+
+{% endblock %}

package/docs/pagina-prueba.html

@@ -0,0 +1,95 @@
+{% set title = "Página de prueba. Gobierno de Aragón" %}
+
+{# Puedes editar este template o usar uno predefinido como por ejemplo src/templates/pages/_template.logged.njk #}
+{% extends "pages/_template.test.njk" %}
+
+
+{% block contentBlock %}
+  <div class="pb-lg"></div>
+  <h1 class="c-h1">Esta es una página de prueba</h1>
+  <p class="c-paragraph-base">Comienza tu prueba editando esta página. Prueba a copiar cualquier ejemplo de <a href="https://desy.aragon.es/desy-html/" class="c-link">desy-html</a> en formato Nunjucks y pégalo en el código de esta página. Mira ejemplos en los comentarios del código fuente de esta página.</p>
+
+
+  {# <p class="c-paragraph-base">Aqui un componente de este proyecto:</p>
+  {% from "components/test-component/_macro.test-component.njk" import componentTestComponent %}
+  {{ componentTestComponent({
+    "text": "Este es un componente de prueba"
+  })  }}
+  <br> #}
+
+
+  {# <p class="c-paragraph-base">Aqui viene un componente de este proyecto, con caller:</p>
+  {% from "components/test-component-caller/_macro.test-component-caller.njk" import componentTestComponentCaller %}
+  {% call componentTestComponentCaller({
+    "html": "Este es un componente <strong class=\" font-bold \">con caller</strong>",
+    "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
+  })  %}
+      <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
+  {% endcall %}
+  <br> #}
+
+
+  {# <p class="c-paragraph-base">Aqui un componente importado de desy-html:</p>
+  {% from "components/button/_macro.button.njk" import componentButton %}
+  {{ componentButton({
+      "text": "Botón de desy-html",
+      "classes": "c-button--primary c-button--lg"
+    })  }}
+  <div class="pb-lg"></div> #}
+
+
+  {# <p class="c-paragraph-base">Aqui un componente dialog que abre una modal importado de desy-html:</p>
+  {% from "components/modal/_macro.modal.njk" import componentModal %}
+  {% set secondaryExample %}
+    {{ componentModal({
+      "id": "secondary-action-example",
+      "title": {
+        "text": "Ejemplo de modal"
+      },
+      "description": {
+        "html": ''
+      },
+      "itemsPrimary": [
+        {
+          "text": "Acción",
+          "classes": "c-button--primary"
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>',
+          "attributes": {
+            "onclick": "closeDialog(this)"
+          }
+        }
+      ],
+      "isDismissible": true,
+      "classes": "mt-2xl"
+    })  }}
+  {% endset %}
+  {% from "components/dialog/_macro.dialog.njk" import componentDialog %}
+  {% call componentDialog({
+    "button": {
+      "text": "Ejemplo de dialog de desy",
+      "attributes": {
+        "onclick": "openDialog('secondary', this, '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
+    }
+  })  %}
+    {{ secondaryExample | safe }}
+  {% endcall %}
+  <div class="pb-lg"></div> #}
+
+
+  {# <p class="c-paragraph-base">Ese es un include:</p>
+  {% include "includes/_test-include.njk" %} #}
+
+
+{% endblock %}

package/docs/plantilla-con-header-advanced.html

@@ -0,0 +1,14 @@
+{% set title = "Plantilla con header advanced. Gobierno de Aragón" %}
+{% extends "pages/_template.with-header-advanced.njk" %}
+
+{% block contentBlock %}
+  {% include "includes/_ejemplo-titulo-parrafo.njk" %}
+  {% include "includes/_abrir-notificaciones.njk" %}
+
+  <p class="c-paragraph-base mb-0">
+    Plantilla en desy-html: src/templates/pages/_template.with-header-advanced.njk
+  </p>
+  <p class="c-paragraph-base">
+    <a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.with-header-advanced.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
+  </p>
+{% endblock %}

package/docs/plantilla-editar-con-cabecera-fija-y-sidebar-sticky.html

@@ -0,0 +1,154 @@
+{% set title = "Plantilla editar con sidebar. Gobierno de Aragón" %}
+{% extends "pages/_template.edit-fixed-with-sticky-sidebar.njk" %}
+
+{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
+
+{% block sidebarBlock %}
+  <h2 id="apartados-de-pagina" class="sr-only">Índice de apartados de esta página</h2>
+  {{ componentMenuVertical({
+    "idPrefix": "sidebar-item",
+    "items": [
+      {
+        "href": "#datos-generales",
+        "text": "Datos generales",
+        "sub": {
+          "items": [
+            {
+              "href": "#denominacion",
+              "text": "Denominación"
+            },
+            {
+              "href": "#descripcion",
+              "text": "Descripción"
+            },
+            {
+              "href": "#organos-o-unidades-gestoras",
+              "text": "Órganos o unidades gestoras"
+            },
+            {
+              "href": "#categorias",
+              "text": "Categorías"
+            },
+            {
+              "href": "#etiquetas-libres",
+              "text": "Etiquetas libres"
+            }
+          ]
+        }
+      },
+      {
+        "text": "Normativa general",
+        "href": "#normativa-general"
+      },
+      {
+        "href": "#caracteristicas-generales-de-tramitacion",
+        "text": "Características generales de tramitación",
+        "sub": {
+          "items": [
+            {
+              "href": "#grupos-de-destinatarios",
+              "text": "Grupos de destinatarios"
+            },
+            {
+              "href": "#destinatarios",
+              "text": "Destinatarios"
+            },
+            {
+              "href": "#requisitos-generales",
+              "text": "Requisitos generales"
+            },
+            {
+              "href": "#canales-de-informacion",
+              "text": "Canales de información"
+            },
+            {
+              "href": "#tramites-principales",
+              "text": "Trámites principales"
+            },
+            {
+              "href": "#resolucion",
+              "text": "Resolución"
+            }
+          ]
+        }
+      }
+    ],
+    "attributes": {
+      "aria-labelledby": "apartados-de-pagina"
+    }
+  })  }}
+{% endblock %}
+
+{% block innerContentBlock %}
+  <h2 id="datos-generales" class="c-h1 c-anchor-scroll-edit">Datos generales (h2)</h2>
+  <h3 id="denominacion" class="c-anchor-scroll-edit c-h3">Denominación (h3)</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  {% include "includes/_abrir-notificaciones-extra.njk" %}
+
+  <p class="c-paragraph-base mb-0">
+    Plantilla en desy-html: src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk
+  </p>
+  <p class="c-paragraph-base">
+    <a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="descripcion" class="c-anchor-scroll-edit c-h3">Descripción</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="organos-o-unidades-gestoras" class="c-anchor-scroll-edit c-h3">Órganos o unidades gestoras</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="categorias" class="c-anchor-scroll-edit c-h3">Categorías</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="etiquetas-libres" class="c-anchor-scroll-edit c-h3">Etiquetas libres</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <hr class="border-neutral-base my-2xl">
+  <h2 id="normativa-general" class="c-h1 c-anchor-scroll-edit">Normativa general</h2>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <hr class="border-neutral-base my-2xl">
+  <h2 id="caracteristicas-generales-de-tramitacion" class="c-h1 c-anchor-scroll-edit">Características generales de tramitación</h2>
+  <h3 id="grupos-de-destinatarios" class="c-anchor-scroll-edit c-h3">Grupos de destinatarios</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="destinatarios" class="c-anchor-scroll-edit c-h3">Destinatarios</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="requisitos-generales" class="c-anchor-scroll-edit c-h3">Requisitos generales</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="canales-de-informacion" class="c-anchor-scroll-edit c-h3">Canales de información</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="tramites-principales" class="c-anchor-scroll-edit c-h3">Trámites principales</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="resolucion" class="c-anchor-scroll-edit c-h3">Resolución</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+{% endblock %}

package/docs/plantilla-editar-con-cabecera-fija.html

@@ -0,0 +1,17 @@
+{% set title = "Plantilla editar con cabecera fija. Gobierno de Aragón" %}
+{% extends "pages/_template.edit-fixed.njk" %}
+
+{# Use headerTitleEditBlock and headerActionsEditBlock template blocks to customize the fixed header #}
+
+{% block contentBlock %}
+  {% include "includes/_ejemplo-titulo-h2-parrafo.njk" %}
+  {% include "includes/_loremipsum-large.njk" %}
+  {% include "includes/_abrir-notificaciones.njk" %}
+
+  <p class="c-paragraph-base mb-0">
+    Plantilla en desy-html: src/templates/pages/_template.edit-fixed.njk
+  </p>
+  <p class="c-paragraph-base">
+    <a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.edit-fixed.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
+  </p>
+{% endblock %}

package/docs/plantilla-logueado-con-cabecera-fija-headroom.html

@@ -0,0 +1,15 @@
+{% set title = "Plantilla logueado con cabecera fija con librería headroom.js. Gobierno de Aragón" %}
+{% extends "pages/_template.logged-selector-fixed-headroom.njk" %}
+
+{% block contentBlock %}
+  {% include "includes/_ejemplo-titulo-parrafo.njk" %}
+  {% include "includes/_loremipsum-large.njk" %}
+  {% include "includes/_abrir-notificaciones.njk" %}
+
+  <p class="c-paragraph-base mb-0">
+    Plantilla en desy-html: src/templates/pages/_template.logged-selector-fixed-headroom.njk
+  </p>
+  <p class="c-paragraph-base">
+    <a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector-fixed-headroom.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
+  </p>
+{% endblock %}

package/docs/plantilla-logueado-con-cabecera-fija.html

@@ -0,0 +1,15 @@
+{% set title = "Plantilla logueado con cabecera fija. Gobierno de Aragón" %}
+{% extends "pages/_template.logged-selector-fixed.njk" %}
+
+{% block contentBlock %}
+  {% include "includes/_ejemplo-titulo-parrafo.njk" %}
+  {% include "includes/_loremipsum-large.njk" %}
+  {% include "includes/_abrir-notificaciones.njk" %}
+
+  <p class="c-paragraph-base mb-0">
+    Plantilla en desy-html: src/templates/pages/_template.logged-selector-fixed.njk
+  </p>
+  <p class="c-paragraph-base">
+    <a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector-fixed.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>
+  </p>
+{% endblock %}