desy-html 16.0.3 → 17.0.0

package/src/templates/components/header-mini/_examples.header-mini.njk

@@ -1,317 +1,320 @@
-{% set exampleComponent = "header-mini" %}
-
-
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "description": "Este es el mini header por defecto. Una barra con el logo de la organización que enlaza al portal de la administración. Deberían usarse en todos los sitios web oficiales.",
-    "data": {
-    },
-    "visualDescription": "Header con fondo blanco y borde gris claro en la parte inferior. Contiene el logo de \"Gobierno de Aragón\" en naranja y negro alineado a la izquierda. Altura compacta con espaciado interno moderado.",
-    "_generated": {
-      "hash": "98238d95850eeeaac1dbbb52bbb0efef",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:59:51.915Z"
-    }
-  },
-  {
-    "name": "Sin clase contenedora",
-    "description": "Usa el parámetro <code>'hasContainer': false</code> para que el componente no tenga container y se expanda ocupando todo el ancho posible, de forma que el logotipo quede a la derecha de la ventana y no con respecto al contenedor centrado.",
-    "data": {
-      "hasContainer": false
-    },
-    "visualDescription": "Header con fondo blanco y borde gris claro en la parte inferior. Presenta el logo de \"Gobierno de Aragón\" en naranja y negro alineado a la izquierda. Altura compacta sin márgenes laterales contenedores.",
-    "_generated": {
-      "hash": "0b4112eaba8169f422a12a247804f4e6",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:59:51.915Z"
-    }
-  }
-] %}
-
-
-
-
-{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
-{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
-
-{% set customNavigation %}
-  <div class="flex flex-1 justify-end items-stretch">
-    <div class="flex justify-center items-center">
-      {{ componentToggle({
-        "id": "megamenu-mini-button-is-open",
-        "classes": "c-button c-button--sm c-button--transparent",
-        "offState": {
-          "classes": "",
-          "html": "<span class='inline-flex'>Menu<svg class='inline-block -mr-2  align-middle -my-px pointer-events-none' viewBox='0 0 96 96' aria-hidden='true' fill='currentColor' focusable='false' width='1.5em' height='1.5em'><g><path d='M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z'></path></g></svg></span>"
-        },
-        "onState": {
-          "classes": "",
-          "html": "<span class='inline-flex'>Menu<svg class='inline-block -mr-2  align-middle -my-px pointer-events-none rotate-180' viewBox='0 0 96 96' aria-hidden='true' fill='currentColor' focusable='false' width='1.5em' height='1.5em'><g><path d='M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z'></path></g></svg></span>"
-        },
-        "attributes": {
-          "aria-controls": "megamenu-mini",
-          "role": "button",
-          "aria-controls": "megamenu-mini",
-          "onClick": "getElementById('megamenu-mini').classList.toggle('hidden')"
-        }
-      }) }}
-    </div>
-  </div>
-{% endset %}
-
-{% set megamenu %}
-  <div id="megamenu-mini" class="hidden">
-    <div class="py-base text-xs lg:text-sm
-    text-neutral-dark ">
-      <div class="container mx-auto px-base ">
-          <nav class="flex flex-col lg:flex-row flex-wrap gap-base" aria-label="Menú principal">
-            <div class=" flex-1 mb-sm">
-              <h3 class="c-h4 mb-base text-black">Temas</h3>
-                <ul class="relative space-y-base lg:columns-1 gap-base">
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#1">
-                      Administración pública y transparencia
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#2">
-                      Agricultura, ganadería y medio rural
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#3">
-                      Ciencia y tecnología
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#4">
-                      Comercio y consumo
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#5">
-                      Cultura, turismo, deportes y ocio
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#6">
-                      Educación y formación
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Empleo, empresa y otras entidades
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Impuestos y tasas
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Industria, energía y minería
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Medio ambiente
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Salud
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Seguridad y justicia
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Servicios sociales
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Transporte, territorio e infraestructuras
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Vivienda y urbanismo
-                    </a>
-                  </li>
-                </ul>
-            </div>
-            <div class=" flex-1 mb-sm">
-              <h3 class="c-h4 mb-base text-black">Momentos vitales</h3>
-                <ul class="relative space-y-base lg:columns-1 gap-base">
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Independizarse o mudarse por primera vez
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Buscar o mejorar el empleo
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Ser mayor de edad
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Emprender un negocio y trabajo autónomo
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Formalizar una relación
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Tener un bebé
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Acompañar en la primera infancia
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Jubilarse
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Cuidar de una persona en situación de dependencia y/o discapacidad
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Final de la vida
-                    </a>
-                  </li>
-                </ul>
-            </div>
-            <div class=" flex-1 mb-sm">
-              <h3 class="c-h4 mb-base text-black">Sede electrónica - Trámites</h3>
-                <ul class="relative space-y-base lg:columns-1 gap-base">
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#1">
-                      Inicio Sede electrónica - Trámites
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#2">
-                      Trámites por tema
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#3">
-                      Trámites por tipo
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#4">
-                      Servicios de la Sede electrónica
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#5">
-                      Información y ayuda
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#6">
-                      Accede a MiA, tu espacio digital<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="presentation"><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>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#7">
-                      Sistema Interno de Información
-                    </a>
-                  </li>
-                </ul>
-            </div>
-            <div class=" flex-1 mb-sm">
-              <h3 class="c-h4 mb-base text-black">Institución</h3>
-                <ul class="relative space-y-base lg:columns-1 gap-base">
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#1">
-                      Portal principal
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#2">
-                      Estatuto de Aragón
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#3">
-                      Organismos
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#4">
-                      Municipios
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#5">
-                      Identidad comunicación corporativa
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#6">
-                      Presupuestos
-                    </a>
-                  </li>
-                  <li class="mb-xs">
-                    <a class="c-link font-semibold" href="#">
-                      Cooperación transfronteriza. Acción exterior
-                    </a>
-                  </li>
-                </ul>
-            </div>
-          </nav>
-
-      </div>
-    </div>
-  </div>
-{% endset %}
-
-
-{% set examples2 =  [
-  {
-    "name": "por defecto",
-    "description": "Este es el mini header por defecto. Una barra con el logo de la organización que enlaza al portal de la administración. Deberían usarse en todos los sitios web oficiales.",
-    "data": {
-    }
-  },
-  {
-    "name": "con megamenu",
-    "description": "Usando los parámetros <code>customNavigationHtml</code> y <code>sub</code>, podemos construir un megamenú.",
-    "data": {
-      "customNavigationHtml": customNavigation | safe,
-      "sub": {
-        "backgroundFullColor": "white",
-        "customNavigationHtml": megamenu | safe
-      }
-    }
-  },
-  {
-    "name": "Sin clase contenedora",
-    "description": 'Usa el parámetro <code>"hasContainer": false</code> para que el componente no tenga container y se expanda ocupando todo el ancho posible, de forma que el logotipo quede a la derecha de la ventana y no con respecto al contenedor centrado.',
-    "data": {
-      "hasContainer": false
-    }
-  }
+{% set exampleComponent = "header-mini" %}
+
+
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "description": "Este es el mini header por defecto. Una barra con el logo de la organización que enlaza al portal de la administración. Deberían usarse en todos los sitios web oficiales.",
+    "data": {
+    },
+    "visualDescription": "Header con fondo blanco y borde gris claro en la parte inferior. Contiene el logo de \"Gobierno de Aragón\" en naranja y negro alineado a la izquierda. Altura compacta con espaciado interno moderado.",
+    "_generated": {
+      "hash": "98238d95850eeeaac1dbbb52bbb0efef",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:51.915Z"
+    }
+  },
+  {
+    "name": "Sin clase contenedora",
+    "description": "Usa el parámetro <code>'hasContainer': false</code> para que el componente no tenga container y se expanda ocupando todo el ancho posible, de forma que el logotipo quede a la derecha de la ventana y no con respecto al contenedor centrado.",
+    "data": {
+      "hasContainer": false
+    },
+    "visualDescription": "Header con fondo blanco y borde gris claro en la parte inferior. Presenta el logo de \"Gobierno de Aragón\" en naranja y negro alineado a la izquierda. Altura compacta sin márgenes laterales contenedores.",
+    "_generated": {
+      "hash": "0b4112eaba8169f422a12a247804f4e6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:59:51.915Z"
+    }
+  }
+] %}
+
+
+
+
+{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
+{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
+
+{% set customNavigation %}
+  <div class="flex flex-1 justify-end items-stretch">
+    <div class="flex justify-center items-center">
+      {{ componentToggle({
+        "id": "megamenu-mini-button-is-open",
+        "classes": "c-button c-button--sm c-button--transparent",
+        "offState": {
+          "classes": "",
+          "html": "<span class='inline-flex'>Menu<svg class='inline-block -mr-2  align-middle -my-px pointer-events-none' viewBox='0 0 96 96' aria-hidden='true' fill='currentColor' focusable='false' width='1.5em' height='1.5em'><g><path d='M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z'></path></g></svg></span>"
+        },
+        "onState": {
+          "classes": "",
+          "html": "<span class='inline-flex'>Menu<svg class='inline-block -mr-2  align-middle -my-px pointer-events-none rotate-180' viewBox='0 0 96 96' aria-hidden='true' fill='currentColor' focusable='false' width='1.5em' height='1.5em'><g><path d='M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z'></path></g></svg></span>"
+        },
+        "attributes": {
+          "aria-controls": "megamenu-mini",
+          "role": "button",
+          "aria-controls": "megamenu-mini",
+          "onClick": "getElementById('megamenu-mini').classList.toggle('hidden')"
+        }
+      }) }}
+    </div>
+  </div>
+{% endset %}
+
+{% set megamenu %}
+  <div id="megamenu-mini" class="hidden">
+    <div class="py-base text-xs lg:text-sm
+    text-neutral-dark ">
+      <div class="container mx-auto px-base ">
+          <nav class="flex flex-col lg:flex-row flex-wrap gap-base" aria-label="Menú principal">
+            <div class=" flex-1 mb-sm">
+              <h3 class="c-h4 mb-base text-black">Temas</h3>
+                <ul class="relative space-y-base lg:columns-1 gap-base">
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#1">
+                      Administración pública y transparencia
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#2">
+                      Agricultura, ganadería y medio rural
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#3">
+                      Ciencia y tecnología
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#4">
+                      Comercio y consumo
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#5">
+                      Cultura, turismo, deportes y ocio
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#6">
+                      Educación y formación
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Empleo, empresa y otras entidades
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Impuestos y tasas
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Industria, energía y minería
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Medio ambiente
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Salud
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Seguridad y justicia
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Servicios sociales
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Transporte, territorio e infraestructuras
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Vivienda y urbanismo
+                    </a>
+                  </li>
+                </ul>
+            </div>
+            <div class=" flex-1 mb-sm">
+              <h3 class="c-h4 mb-base text-black">Momentos vitales</h3>
+                <ul class="relative space-y-base lg:columns-1 gap-base">
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Independizarse o mudarse por primera vez
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Buscar o mejorar el empleo
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Ser mayor de edad
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Emprender un negocio y trabajo autónomo
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Formalizar una relación
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Tener un bebé
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Acompañar en la primera infancia
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Jubilarse
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Cuidar de una persona en situación de dependencia y/o discapacidad
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Final de la vida
+                    </a>
+                  </li>
+                </ul>
+            </div>
+            <div class=" flex-1 mb-sm">
+              <h3 class="c-h4 mb-base text-black">Sede electrónica - Trámites</h3>
+                <ul class="relative space-y-base lg:columns-1 gap-base">
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#1">
+                      Inicio Sede electrónica - Trámites
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#2">
+                      Trámites por tema
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#3">
+                      Trámites por tipo
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#4">
+                      Servicios de la Sede electrónica
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#5">
+                      Información y ayuda
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#6">
+                      Accede a MiA, tu espacio digital<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="presentation"><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>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#7">
+                      Sistema Interno de Información
+                    </a>
+                  </li>
+                </ul>
+            </div>
+            <div class=" flex-1 mb-sm">
+              <h3 class="c-h4 mb-base text-black">Institución</h3>
+                <ul class="relative space-y-base lg:columns-1 gap-base">
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#1">
+                      Portal principal
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#2">
+                      Estatuto de Aragón
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#3">
+                      Organismos
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#4">
+                      Municipios
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#5">
+                      Identidad comunicación corporativa
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#6">
+                      Presupuestos
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Cooperación transfronteriza. Acción exterior
+                    </a>
+                  </li>
+                </ul>
+            </div>
+          </nav>
+
+      </div>
+    </div>
+  </div>
+{% endset %}
+
+
+{% set examples2 =  [
+  {
+    "name": "por defecto",
+    "description": "Este es el mini header por defecto. Una barra con el logo de la organización que enlaza al portal de la administración. Deberían usarse en todos los sitios web oficiales.",
+    "data": {
+    },
+    "visualDescription": "Header con fondo blanco y borde gris claro en la parte inferior. Contiene el logo de la organización en naranja y negro alineado a la izquierda. Altura compacta con espaciado interno moderado."
+  },
+  {
+    "name": "con megamenu",
+    "description": "Usando los parámetros <code>customNavigationHtml</code> y <code>sub</code>, podemos construir un megamenú.",
+    "data": {
+      "customNavigationHtml": customNavigation | safe,
+      "sub": {
+        "backgroundFullColor": "white",
+        "customNavigationHtml": megamenu | safe
+      }
+    },
+    "visualDescription": "Header con fondo blanco y borde gris claro en la parte inferior. Contiene el logo de la organización en naranja y negro alineado a la izquierda. Incluye un botón de menú con icono de flecha desplegable alineado a la derecha. Debajo del header se despliega un megamenú con fondo blanco conteniendo múltiples columnas de navegación con títulos en negro y enlaces en azul."
+  },
+  {
+    "name": "Sin clase contenedora",
+    "description": 'Usa el parámetro <code>"hasContainer": false</code> para que el componente no tenga container y se expanda ocupando todo el ancho posible, de forma que el logotipo quede a la derecha de la ventana y no con respecto al contenedor centrado.',
+    "data": {
+      "hasContainer": false
+    },
+    "visualDescription": "Header con fondo blanco y borde gris claro en la parte inferior. Presenta el logo de la organización en naranja y negro alineado a la izquierda. Altura compacta sin márgenes laterales contenedores, expandiéndose hacia los bordes de la ventana."
+  }
 ] %}