desy-html 5.3.0 → 6.2.0

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

@@ -0,0 +1,536 @@
+{% from "components/nav/_macro.nav.njk" import componentNav %}
+{% from "components/details/_macro.details.njk" import componentDetails %}
+{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}
+
+{% set navigationCustom %}
+  {{ componentMenuNavigation({
+    "idPrefix": "header-custom-nav",
+    "classes": "c-menu-navigation--last-right hidden lg:block w-full bg-neutral-lighter ",
+    "items": [
+      {
+        "text": "Custom Item 1",
+        "id": "header-custom-nav-item-1",
+        "classes": "c-menu-navigation__button--header -mr-base",
+        "sub": {
+          "items": [
+            {
+              "href": "#",
+              "text": "Subitem 1"
+            },
+            {
+              "href": "#",
+              "text": "Subitem 2"
+            },
+            {
+              "href": "#",
+              "text": "Subitem 3"
+            }
+          ],
+          "attributes": {
+            "aria-labelledby": "header-custom-nav-item-1"
+          }
+        }
+      },
+      {
+        "text": "Custom Active Item 2",
+        "id": "header-custom-nav-item-2",
+        "classes": "c-menu-navigation__button--header -mr-base",
+        "active": true,
+        "sub": {
+          "items": [
+            {
+              "href": "#",
+              "text": "Subitem 1"
+            },
+            {
+              "href": "#",
+              "text": "Subitem 2",
+              "active": true
+            },
+            {
+              "href": "#",
+              "text": "Subitem 3"
+            }
+          ],
+          "attributes": {
+            "aria-labelledby": "header-custom-nav-item-2"
+          }
+        }
+      },
+      {
+        "text": "Custom Item 3",
+        "id": "header-custom-nav-item-3",
+        "classes": "c-menu-navigation__button--header -mr-base",
+        "sub": {
+          "items": [
+            {
+              "href": "#",
+              "text": "Subitem 1"
+            },
+            {
+              "href": "#",
+              "text": "Subitem 2"
+            },
+            {
+              "href": "#",
+              "text": "Subitem 3"
+            }
+          ],
+          "attributes": {
+            "aria-labelledby": "header-custom-nav-item-3"
+          }
+        }
+      },
+      {
+          "text": "Item 4 right",
+          "id": "header-custom-nav-item-4",
+          "classes": "c-menu-navigation__button--header",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "header-custom-nav-item-4"
+            }
+          }
+        }
+    ],
+    "attributes": {
+      "aria-label": "Navegación principal"
+    }
+  })  }}
+{% endset %}
+
+{% set exampleOffcanvas %}
+  <nav class="w-full p-2" aria-label="Menú móvil">
+    <h3 class="p-base text-base font-bold">Carpeta del gestor</h3>
+    {{ componentNav({
+      "idPrefix": "nav-mobile-pages",
+      "hasNav": false,
+      "items": [
+        {
+          "href": "#",
+          "text": "Inicio",
+          "active": true
+        },
+        {
+          "href": "#",
+          "text": "Expedientes"
+        },
+        {
+          "href": "#",
+          "text": "Bandejas",
+          "divider": true
+        }
+      ],
+      "attributes": {
+        "aria-label": "Lista de páginas"
+      }
+    })  }}
+    <h3 class="p-base text-base font-bold">Usuario/a: Marta Pérez</h3>
+    {{ componentNav({
+      "idPrefix": "nav-mobile-user",
+      "hasNav": false,
+      "items": [
+        {
+          "href": "#",
+          "text": "Perfil"
+        },
+        {
+          "href": "#",
+          "text": "Cerrar sesión",
+          "divider": true
+        }
+      ],
+      "attributes": {
+        "aria-label": "Lista de acciones de usuario"
+      }
+    })  }}
+    {% call componentDetails({
+      "classes": "px-base",
+      "summary": {
+        "html": "Cambiar de aplicación",
+        "classes": "c-link text-sm"
+      }
+    })  %}
+        {{ componentNav({
+          "idPrefix": "nav-mobile-apps",
+          "hasNav": false,
+          "items": [
+            {
+              "href": "#",
+              "text": "Carpeta del gestor",
+              "active": true
+            },
+            {
+              "href": "#",
+              "text": "Catálogo de servicios"
+            },
+            {
+              "href": "#",
+              "text": "Bandeja de entrada"
+            },
+            {
+              "href": "#",
+              "text": "Sistema de comprobación y verificación de documentos por CSV"
+            }
+          ],
+          "attributes": {
+            "aria-label": "Lista de aplicaciones"
+          }
+        })  }}
+    {% endcall %}
+  </nav>
+{% endset %}
+
+{% set exampleComponent = "header" %}
+{% set examples =  [
+  {
+    "name": "default",
+    "description": "El menú por defecto de las aplicaciones de la administración digital tiene un logo que enlaza a la página de inicio y un menu principal de navegación. El menu de navegación se oculta en mobile si no se añaden clases a navigation. El logotipo es simple, sin letras, si la app está diseñada para funcionarios. Junto al logo hay un texto que da nombre a la app en la que estamos.",
+    "data": {
+      "homepageUrl": "/",
+      "subnav": {
+        "text": "Carpeta del gestor"
+      },
+      "navigation": {
+        "items": [
+          {
+            "href": "#1",
+            "text": "Navigation item 1"
+          },
+          {
+            "href": "#2",
+            "text": "Navigation item 2",
+            "active": true
+          },
+          {
+            "href": "#3",
+            "text": "Navigation item 3"
+          },
+          {
+            "href": "#4",
+            "text": "Navigation item 4"
+          }
+          ]
+      }
+    }
+  },
+  {
+    "name": "with custom navigation",
+    "description": "Tras nuestro menú de navegación tenemos customNavigationHtml: una zona anidable para poder añadir una navegación personalizada",
+    "data": {
+      "homepageUrl": "/",
+      "subnav": {
+        "text": "Carpeta del gestor"
+      },
+      "customNavigationHtml": '<div class="flex flex-wrap flex-1 gap-base">'+ navigationCustom | safe + '</div>'
+    }
+  },
+  {
+    "name": "with custom navigation right",
+    "description": "En el customNavigationHtml podemos añadir elementos posicionados a la derecha",
+    "data": {
+      "homepageUrl": "/",
+      "subnav": {
+        "text": "Carpeta del gestor"
+      },
+      "customNavigationHtml": '<div class="relative flex justify-end items-center flex-1 gap-base"><div class="absolute -top-3 right-0 text-black"><a href="#"><svg class="w-5 h-5" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-label="Notificaciones"><path d="M7.25 12.5h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5Z" fill="currentColor" transform="scale(3.42857)"/><g transform="scale(3.42857)"><circle cx="10.5" cy="2.5" r="2.5" fill="currentColor"/><path d="M11.5 10a1 1 0 0 1-1-1V6.74a.25.25 0 0 0-.24-.25 4 4 0 0 1-3.76-4 3.43 3.43 0 0 1 .11-.86.12.12 0 0 0 0-.1.15.15 0 0 0-.09 0 4 4 0 0 0-4 4V9a1 1 0 0 1-1 1 .5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1Z" fill="currentColor"/></g></svg></a></div></div>'
+    }
+  },
+  {
+    "name": "with custom skipLink",
+    "description": "Pasando parámetros customizados al componente Skip Link. Útil para hacer plantillas de página con barra lateral o con un contenido principal localizado en otro sitio diferente al habitual.",
+    "data": {
+      "skipLink":{
+        "text": "Saltar al contenido central",
+        "href": "#content-center",
+        "classes": "ds-focus",
+        "attributes": {
+          "attr-example": "custom-data"
+        }
+      },
+      "homepageUrl": "/",
+      "subnav": {
+        "text": "Carpeta del gestor"
+      },
+      "navigation": {
+        "items": [
+          {
+            "href": "#1",
+            "text": "Navigation item 1"
+          },
+          {
+            "href": "#2",
+            "text": "Navigation item 2",
+            "active": true
+          },
+          {
+            "href": "#3",
+            "text": "Navigation item 3"
+          },
+          {
+            "href": "#4",
+            "text": "Navigation item 4"
+          }
+          ]
+      }
+    }
+  },
+  {
+    "name": "Expanded logo",
+    "description": "expandedLogo: true. Utilizar este logotipo en apps que estén dirigidas al ciudadano.",
+    "data": {
+      "homepageUrl": "/",
+      "expandedLogo": true,
+      "subnav": {
+        "text": "Carpeta del gestor"
+      },
+      "navigation": {
+        "items": [
+          {
+            "href": "#1",
+            "text": "Navigation item 1"
+          },
+          {
+            "href": "#2",
+            "text": "Navigation item 2",
+            "active": true
+          },
+          {
+            "href": "#3",
+            "text": "Navigation item 3"
+          },
+          {
+            "href": "#4",
+            "text": "Navigation item 4"
+          }
+          ]
+      }
+    }
+  },
+  {
+    "name": "No logo y customLogoHtml",
+    "description": "noLogo: true. Oculta el logotipo del Gobierno de Aragón. customLogoHtml para insertar un logotipo o HTML personalizado en su lugar",
+    "data": {
+      "homepageUrl": "/",
+      "noLogo": true,
+      "customLogoHtml": '<svg xmlns="http://www.w3.org/2000/svg" width="254" height="32" viewBox="0 0 588 74" aria-label="Gobierno de Aragón" role="img"><title>Ir a la página de inicio</title><defs><clipPath id="a-logo40"><path data-name="Rectángulo 55" transform="translate(337 484)" fill="#fff" stroke="#707070" d="M0 0h588v74H0z"/></clipPath><clipPath id="b-logo40"><path data-name="Rectángulo 1" d="M0 0h207.085v73.44H0z"/></clipPath><clipPath id="c-logo40"><path data-name="Trazado 48" d="m66.9 43.754 8.184 8.228 7.966-7.966v-.261a18.374 18.374 0 0 1 12.059-17.24L83.094 14.5A34.49 34.49 0 0 0 66.9 43.754" transform="translate(-66.9 -14.5)"/></clipPath><clipPath id="e-logo40"><path data-name="Trazado 49" d="m86.7 117.514 7.313 7.313a34.482 34.482 0 0 0 18.632 5.442 33.646 33.646 0 0 0 7.879-.914L101.2 110.026a18.482 18.482 0 0 1-2.917-2.917l-.609-.609Z" transform="translate(-86.7 -106.5)"/></clipPath><clipPath id="g-logo40"><path data-name="Rectángulo 54" transform="translate(0 .446)" d="M0 0h353v138H0z"/></clipPath><clipPath id="h-logo40"><path data-name="Rectángulo 53" fill="gold" d="M0 0h67.807v67.81H0z"/></clipPath><linearGradient id="d-logo40" x1="-1.032" y1="1.791" x2="-1.017" y2="1.791" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#8b1810"/><stop offset=".25" stop-color="#8b1810"/><stop offset=".313" stop-color="#941a14"/><stop offset=".9" stop-color="#e62a35"/><stop offset="1" stop-color="#e62a35"/></linearGradient><linearGradient id="f-logo40" x1="-1.116" y1="1.139" x2="-1.103" y2="1.139" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#8b1810"/><stop offset=".092" stop-color="#941a14"/><stop offset=".95" stop-color="#e62a35"/><stop offset="1" stop-color="#e62a35"/></linearGradient></defs><g data-name="logos juntos" transform="translate(-337 -484)" clip-path="url(#a-logo40)"><g data-name="Grupo 60"><g data-name="Color-positivo-horizontal-RGB copia"><path data-name="Trazado 1" d="m454.103 488.086-1.7.522-.259-.827 2.22-.74h.74v9.011h-1Z"/><g data-name="Grupo 48"><g data-name="Grupo 1" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 2" d="m120.411 9.925.609-.784a3.184 3.184 0 0 0 2.22.958c1.611 0 2.7-1.654 2.655-3.918a3.072 3.072 0 0 1-5.659-1.35v-.043a3.046 3.046 0 0 1 3.222-3.047 3.142 3.142 0 0 1 2.351.914 4.547 4.547 0 0 1 1.128 3.486v.04c0 2.83-1.524 4.832-3.744 4.832a3.77 3.77 0 0 1-2.786-1.088m5.23-5.184a2.077 2.077 0 0 0-2.264-2.046 2.046 2.046 0 0 0-2.133 2.09 2.023 2.023 0 0 0 2.22 1.959 2.068 2.068 0 0 0 2.177-2.003"/></g><g data-name="Grupo 2" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 3" d="M128.334 8.488a2.439 2.439 0 0 1 1.828-2.22 2.3 2.3 0 0 1-1.528-2.046v-.043c0-1.393 1.437-2.351 3.047-2.351s3.047 1 3.047 2.351v.044a2.211 2.211 0 0 1-1.524 2.046 2.433 2.433 0 0 1 1.828 2.177v.044c0 1.524-1.48 2.568-3.352 2.568-1.915-.044-3.352-1.088-3.352-2.568m5.7-.044c0-1.045-1.045-1.741-2.351-1.741s-2.351.7-2.351 1.7v.044c0 .914.871 1.7 2.351 1.7s2.351-.784 2.351-1.7m-.3-4.179c0-.914-.871-1.567-2.046-1.567s-2.046.653-2.046 1.567v.044a1.851 1.851 0 0 0 2.046 1.654c1.132-.087 2.046-.74 2.046-1.7"/></g><g data-name="Grupo 3" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 4" d="m136.344 10.1 3.265-2.873c1.35-1.219 1.872-1.915 1.872-2.83a1.693 1.693 0 0 0-1.785-1.7 2.786 2.786 0 0 0-2.394 1.524l-.74-.522a3.551 3.551 0 0 1 3.221-1.914 2.6 2.6 0 0 1 2.786 2.525v.044c0 1.306-.7 2.133-2.264 3.483l-2.394 2.133h4.745v.915h-6.269v-.784Z"/></g><g data-name="Grupo 4" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Rectángulo 4" d="M145.878 6.53h5.877v1.001h-5.877z"/></g><g data-name="Grupo 5" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 5" d="m155.107 10.1 3.265-2.873c1.35-1.219 1.872-1.915 1.872-2.83a1.693 1.693 0 0 0-1.785-1.7 2.786 2.786 0 0 0-2.394 1.524l-.74-.522a3.551 3.551 0 0 1 3.221-1.914 2.6 2.6 0 0 1 2.786 2.525v.044c0 1.306-.7 2.133-2.264 3.483l-2.394 2.133h4.745v.915h-6.269v-.784Z"/></g><g data-name="Grupo 6" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 6" d="M162.943 6.443c0-2.525 1.48-4.658 3.787-4.658s3.744 2.09 3.744 4.614v.044c0 2.525-1.48 4.614-3.787 4.614-2.264 0-3.744-2.133-3.744-4.614m6.53 0c0-2-1.088-3.744-2.743-3.744-1.7 0-2.743 1.7-2.743 3.7v.044c0 1.959 1.088 3.7 2.743 3.7 1.7-.044 2.743-1.741 2.743-3.7"/></g><g data-name="Grupo 7" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 7" d="m171.78 10.1 3.265-2.873c1.349-1.219 1.872-1.915 1.872-2.83a1.693 1.693 0 0 0-1.785-1.7 2.786 2.786 0 0 0-2.394 1.524l-.784-.522a3.551 3.551 0 0 1 3.226-1.914 2.6 2.6 0 0 1 2.786 2.525v.044c0 1.306-.7 2.133-2.264 3.483l-2.394 2.133h4.745v.915h-6.273Z"/></g><g data-name="Grupo 8" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 8" d="m179.441 10.1 3.265-2.873c1.35-1.219 1.872-1.915 1.872-2.83a1.693 1.693 0 0 0-1.785-1.7 2.786 2.786 0 0 0-2.394 1.524l-.74-.522a3.551 3.551 0 0 1 3.221-1.914 2.6 2.6 0 0 1 2.786 2.525v.044c0 1.306-.7 2.133-2.264 3.483l-2.394 2.133h4.745v.915h-6.269v-.784Z"/></g><g data-name="Grupo 9" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 9" d="M119.367 16.499h.958l4.093 9.011h-1.09l-1.045-2.351h-4.875l-1.045 2.351h-1.045Zm2.525 5.746-2.046-4.571-2.046 4.571Z"/></g><g data-name="Grupo 10" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 10" d="M126.027 18.893h1v1.132a2.56 2.56 0 0 1 2.264-1.306 2.413 2.413 0 0 1 2.525 2.655v4.092h-1v-3.874a1.766 1.766 0 0 0-1.828-2 1.967 1.967 0 0 0-2 2.09v3.787h-1v-6.576Z"/></g><g data-name="Grupo 11" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 11" d="M133.906 16.368h1.132v1.088h-1.132Zm.087 2.525h1v6.617h-1Z"/></g><g data-name="Grupo 12" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 12" d="M136.605 18.893h1.088l2.22 5.485 2.264-5.485h1.045l-2.873 6.66h-.871Z"/></g><g data-name="Grupo 13" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 13" d="M147.314 24.814a2.841 2.841 0 0 0 2.09-.914l.609.566a3.44 3.44 0 0 1-2.743 1.262 3.446 3.446 0 0 1-.131-6.878c1.959 0 3.091 1.567 3.091 3.526v.348h-5.268a2.351 2.351 0 0 0 2.351 2.09m1.959-3a2.184 2.184 0 0 0-2.133-2.22 2.274 2.274 0 0 0-2.133 2.22Z"/></g><g data-name="Grupo 14" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 14" d="M151.972 18.893h1v1.741a2.773 2.773 0 0 1 2.7-1.828v1.045h-.087c-1.437 0-2.612 1.045-2.612 3.047v2.655h-1Z"/></g><g data-name="Grupo 15" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 15" d="m156.63 24.683.479-.7a3.937 3.937 0 0 0 2.307.827c.784 0 1.35-.392 1.35-1.045v-.044c0-.653-.784-.914-1.654-1.175-1.045-.3-2.177-.653-2.177-1.872v-.044a2.031 2.031 0 0 1 2.263-1.911 4.313 4.313 0 0 1 2.394.74l-.435.74a3.757 3.757 0 0 0-1.959-.653c-.784 0-1.262.392-1.262.958v.044c0 .609.827.871 1.7 1.132 1.045.3 2.133.7 2.133 1.915v.044a2.1 2.1 0 0 1-2.351 2 4.5 4.5 0 0 1-2.786-.958"/></g><g data-name="Grupo 16" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 16" d="M163.03 23.595c0-1.437 1.132-2.177 2.83-2.177a8.29 8.29 0 0 1 2 .261v-.216c0-1.175-.7-1.785-1.959-1.785a4.252 4.252 0 0 0-2 .479l-.3-.827a5.252 5.252 0 0 1 2.394-.566 2.948 2.948 0 0 1 2.133.74 2.57 2.57 0 0 1 .7 1.959v4.049h-.958v-1a2.887 2.887 0 0 1-2.394 1.132 2.222 2.222 0 0 1-2.438-2.046m4.876-.522v-.613a7.247 7.247 0 0 0-1.915-.261c-1.219 0-1.915.522-1.915 1.35v.044c0 .827.784 1.306 1.654 1.306a2.049 2.049 0 0 0 2.177-1.828"/></g><g data-name="Grupo 17" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 17" d="M170.953 18.893h1v1.741a2.773 2.773 0 0 1 2.7-1.828v1.045h-.087c-1.437 0-2.612 1.045-2.612 3.047v2.655h-1Z"/></g><g data-name="Grupo 18" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 18" d="M176.177 16.368h1.132v1.088h-1.132Zm.044 2.525h1v6.617h-1Z"/></g><g data-name="Grupo 19" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 19" d="M179.093 22.246a3.428 3.428 0 0 1 3.439-3.483 3.391 3.391 0 0 1 3.439 3.439 3.428 3.428 0 0 1-3.483 3.439 3.319 3.319 0 0 1-3.4-3.4m5.877 0a2.5 2.5 0 0 0-2.438-2.612 2.464 2.464 0 0 0-2.438 2.568 2.465 2.465 0 0 0 2.438 2.568 2.4 2.4 0 0 0 2.438-2.525"/></g><g data-name="Grupo 20" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 20" d="M115.579 31.169h7.226v2.133h-4.745v1.35h4.31v1.959h-4.31v1.437h4.789v2.09h-7.27Z"/></g><g data-name="Grupo 21" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 21" d="m123.458 39.266.914-1.48a4.456 4.456 0 0 0 2.394.784c.435 0 .609-.131.609-.392v-.044c0-.261-.392-.392-1.132-.609-1.35-.348-2.438-.827-2.438-2.22v-.044c0-1.48 1.175-2.307 2.786-2.307a5.519 5.519 0 0 1 2.873.827l-.827 1.524a4.64 4.64 0 0 0-2.046-.653c-.392 0-.566.131-.566.348v.044c0 .261.392.392 1.132.609 1.35.392 2.438.871 2.438 2.22v.044c0 1.524-1.132 2.307-2.83 2.307a5.015 5.015 0 0 1-3.308-.958"/></g><g data-name="Grupo 22" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 22" d="M130.859 38.004v-2.83h-.827v-1.959h.827v-1.741h2.438v1.741h1.611v1.959h-1.611v2.351c0 .479.218.7.653.7a2.34 2.34 0 0 0 .914-.218v1.915a3.267 3.267 0 0 1-1.7.392 2.032 2.032 0 0 1-2.307-2.307"/></g><g data-name="Grupo 23" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 23" d="M135.604 38.178c0-1.48 1.088-2.22 2.7-2.22a5.478 5.478 0 0 1 1.654.261v-.087c0-.7-.435-1.132-1.393-1.132a4.566 4.566 0 0 0-1.915.392l-.479-1.7a7.222 7.222 0 0 1 2.786-.522 3.721 3.721 0 0 1 2.655.827 2.921 2.921 0 0 1 .74 2.22v4h-2.394v-.7a2.643 2.643 0 0 1-2.046.871 2.2 2.2 0 0 1-2.307-2.22m4.4-.522v-.3a3.13 3.13 0 0 0-.958-.174c-.7 0-1.132.348-1.132.871v.044c0 .479.348.74.871.74a1.155 1.155 0 0 0 1.219-1.175"/></g><g data-name="Grupo 24" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 24" d="M144.006 38.004v-2.83h-.827v-1.959h.827v-1.741h2.438v1.741h1.611v1.959h-1.611v2.351c0 .479.218.7.653.7a2.339 2.339 0 0 0 .914-.218v1.915a3.267 3.267 0 0 1-1.7.392 2.032 2.032 0 0 1-2.307-2.307"/></g><g data-name="Grupo 25" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 25" d="M149.056 37.742v-4.527h2.438v3.744c0 .74.392 1.175 1 1.175.566 0 1-.392 1-1.175v-3.744h2.438v6.922h-2.436v-.958a2.554 2.554 0 0 1-2.09 1.088c-1.48.044-2.351-.914-2.351-2.525"/></g><g data-name="Grupo 26" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 26" d="M157.631 38.004v-2.83h-.827v-1.959h.827v-1.741h2.438v1.741h1.611v1.959h-1.611v2.351c0 .479.218.7.653.7a2.339 2.339 0 0 0 .914-.218v1.915a3.267 3.267 0 0 1-1.7.392 2.032 2.032 0 0 1-2.307-2.307"/></g><g data-name="Grupo 27" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 27" d="M162.246 36.742a3.836 3.836 0 0 1 7.662-.044v.044a3.837 3.837 0 0 1-7.662 0m5.311 0a1.489 1.489 0 0 0-1.48-1.567 1.442 1.442 0 0 0-1.437 1.524v.044a1.462 1.462 0 1 0 2.917 0"/></g><g data-name="Grupo 28" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 28" d="M174.218 36.741c0-2.264 1.393-3.657 3.047-3.657a2.708 2.708 0 0 1 2.133 1v-3.263h2.438v9.36h-2.438v-.914a2.64 2.64 0 0 1-2.133 1.088 3.328 3.328 0 0 1-3.047-3.614m5.224-.044a1.449 1.449 0 0 0-1.393-1.567 1.482 1.482 0 0 0-1.437 1.567v.044a1.482 1.482 0 0 0 1.437 1.567 1.547 1.547 0 0 0 1.393-1.611"/></g><g data-name="Grupo 29" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 29" d="M182.837 36.742a3.481 3.481 0 0 1 3.483-3.657c2.394 0 3.483 1.741 3.483 3.787v.479h-4.614a1.417 1.417 0 0 0 1.48 1.132 2.066 2.066 0 0 0 1.524-.7l1.35 1.132a3.625 3.625 0 0 1-3 1.393 3.487 3.487 0 0 1-3.7-3.57m4.745-.609c-.087-.784-.522-1.262-1.219-1.262-.653 0-1.088.479-1.219 1.262Z"/></g><g data-name="Grupo 30" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 30" d="M118.67 45.753h2.394l3.831 9.011h-2.655l-.657-1.611h-3.439l-.653 1.611h-2.608Zm2.177 5.485-1-2.568-1 2.568Z"/></g><g data-name="Grupo 31" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 31" d="M125.417 52.413v-4.527h2.438v3.744c0 .74.392 1.175 1 1.175.566 0 1-.392 1-1.175v-3.744h2.438v6.922h-2.436v-.958a2.554 2.554 0 0 1-2.09 1.088 2.246 2.246 0 0 1-2.351-2.525"/></g><g data-name="Grupo 32" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 32" d="M133.993 52.631v-2.83h-.827v-1.959h.827v-1.741h2.438v1.741h1.611v1.959h-1.611v2.351c0 .479.218.7.653.7a2.339 2.339 0 0 0 .914-.218v1.915a3.267 3.267 0 0 1-1.7.392 2.032 2.032 0 0 1-2.307-2.307"/></g><g data-name="Grupo 33" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 33" d="M138.608 51.369a3.836 3.836 0 0 1 7.662-.044v.044a3.837 3.837 0 0 1-7.662 0m5.311 0a1.489 1.489 0 0 0-1.48-1.567 1.442 1.442 0 0 0-1.437 1.524v.044a1.462 1.462 0 1 0 2.917 0"/></g><g data-name="Grupo 34" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 34" d="M147.314 47.842h2.438v.958a2.586 2.586 0 0 1 2.09-1.132 2.261 2.261 0 0 1 2.351 2.568v4.532h-2.439v-3.744c0-.74-.392-1.175-.958-1.175-.609 0-1.045.392-1.045 1.175v3.744h-2.437Z"/></g><g data-name="Grupo 35" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 35" d="M155.15 51.369a3.836 3.836 0 0 1 7.662-.044v.044a3.837 3.837 0 0 1-7.662 0m5.267 0a1.489 1.489 0 0 0-1.48-1.567 1.442 1.442 0 0 0-1.437 1.524v.044a1.462 1.462 0 1 0 2.917 0"/></g><g data-name="Grupo 36" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 36" d="M163.813 47.843h2.438v.958a2.534 2.534 0 0 1 2.046-1.088 2.124 2.124 0 0 1 2 1.132 2.908 2.908 0 0 1 2.307-1.132 2.226 2.226 0 0 1 2.351 2.525v4.527h-2.438v-3.744c0-.74-.392-1.132-.958-1.132a1 1 0 0 0-1 1.132v3.744h-2.433v-3.744c0-.74-.392-1.132-.958-1.132a1 1 0 0 0-1 1.132v3.744h-2.442v-6.922Z"/></g><g data-name="Grupo 37" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 37" d="M176.307 47.842h2.438v6.922h-2.438Zm1.611-2.96 2.264.74-1.915 1.611h-1.7Z"/></g><g data-name="Grupo 38" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 38" d="M179.746 52.805c0-1.48 1.088-2.22 2.7-2.22a5.479 5.479 0 0 1 1.654.261v-.131c0-.7-.435-1.132-1.393-1.132a4.566 4.566 0 0 0-1.915.392l-.479-1.7a7.222 7.222 0 0 1 2.786-.522 3.721 3.721 0 0 1 2.656.827 2.921 2.921 0 0 1 .74 2.22v3.961h-2.349v-.7a2.643 2.643 0 0 1-2.046.871 2.117 2.117 0 0 1-2.351-2.133m4.44-.522v-.3a3.13 3.13 0 0 0-.958-.174c-.7 0-1.132.348-1.132.871v.044c0 .479.348.74.871.74a1.181 1.181 0 0 0 1.219-1.175"/></g><g data-name="Grupo 39" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 39" d="M191.065 51.368c0-2.264 1.393-3.657 3.047-3.657a2.708 2.708 0 0 1 2.133 1v-3.263h2.438v9.36h-2.438v-.914a2.64 2.64 0 0 1-2.133 1.088 3.3 3.3 0 0 1-3.047-3.613m5.224-.044a1.449 1.449 0 0 0-1.393-1.567 1.482 1.482 0 0 0-1.437 1.567v.044a1.482 1.482 0 0 0 1.437 1.567 1.516 1.516 0 0 0 1.393-1.611"/></g><g data-name="Grupo 40" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 40" d="M199.684 51.369a3.481 3.481 0 0 1 3.483-3.657c2.394 0 3.483 1.741 3.483 3.787v.479h-4.614a1.417 1.417 0 0 0 1.48 1.132 2.066 2.066 0 0 0 1.524-.7l1.35 1.132a3.625 3.625 0 0 1-3 1.393 3.487 3.487 0 0 1-3.7-3.57m4.745-.609c-.087-.784-.522-1.262-1.219-1.262-.653 0-1.088.479-1.219 1.262Z"/></g><g data-name="Grupo 41" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 41" d="M118.67 60.38h2.394l3.831 9.011h-2.655l-.657-1.611h-3.439l-.653 1.611h-2.608Zm2.177 5.529-1-2.568-1 2.568Z"/></g><g data-name="Grupo 42" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 42" d="M125.636 62.513h2.438v1.393a2.124 2.124 0 0 1 2.177-1.524v2.568h-.218c-1.262 0-2 .74-2 2.351v2.133h-2.441v-6.922Z"/></g><g data-name="Grupo 43" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 43" d="M130.424 67.432c0-1.48 1.088-2.22 2.7-2.22a5.478 5.478 0 0 1 1.654.261v-.131c0-.7-.435-1.132-1.393-1.132a4.566 4.566 0 0 0-1.915.392l-.479-1.7a7.222 7.222 0 0 1 2.786-.522 3.721 3.721 0 0 1 2.656.827 2.921 2.921 0 0 1 .74 2.22v3.961h-2.394v-.7a2.643 2.643 0 0 1-2.046.871 2.1 2.1 0 0 1-2.307-2.133m4.44-.522v-.3a3.13 3.13 0 0 0-.958-.174c-.7 0-1.132.348-1.132.871v.044c0 .479.348.74.871.74a1.181 1.181 0 0 0 1.219-1.175"/></g><g data-name="Grupo 44" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 44" d="m138.39 70.697.784-1.611a4.96 4.96 0 0 0 2.438.653c1.219 0 1.828-.609 1.828-1.7v-.261a2.675 2.675 0 0 1-2.133 1.045 3.03 3.03 0 0 1-3.091-3.221v-.044a3.012 3.012 0 0 1 3-3.221 2.849 2.849 0 0 1 2.177.958v-.827h2.438v5.271a3.658 3.658 0 0 1-.914 2.786 4.179 4.179 0 0 1-3.047.958 7.341 7.341 0 0 1-3.483-.784m5.006-5.093a1.416 1.416 0 0 0-2.83 0v.044A1.351 1.351 0 0 0 142 67a1.4 1.4 0 0 0 1.393-1.393"/></g><g data-name="Grupo 45" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 45" d="M146.836 65.996a3.836 3.836 0 0 1 7.662-.044v.044a3.837 3.837 0 0 1-7.662 0m5.267 0a1.489 1.489 0 0 0-1.48-1.567 1.442 1.442 0 0 0-1.437 1.524v.044a1.462 1.462 0 1 0 2.917 0m-1.045-6.53 2.264.74-1.915 1.611h-1.7Z"/></g><g data-name="Grupo 46" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 46" d="M155.499 62.513h2.438v.958a2.586 2.586 0 0 1 2.09-1.132 2.261 2.261 0 0 1 2.351 2.568v4.532h-2.439v-3.744c0-.74-.392-1.175-.958-1.175-.609 0-1.045.392-1.045 1.175v3.744h-2.437v-6.922Z"/></g><g data-name="Grupo 47" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 47" d="M63.688 1.001a34.565 34.565 0 1 0 34.565 34.565A34.538 34.538 0 0 0 63.688 1.001m0 52.936A18.327 18.327 0 1 1 82.059 35.61a18.487 18.487 0 0 1-18.371 18.327" fill="#e62a35"/></g></g><g data-name="Grupo 50"><g data-name="Grupo 49" clip-path="url(#c-logo40)" transform="translate(366.123 491.481)"><path data-name="Rectángulo 49" fill="url(#d-logo40)" d="M0 0h28.209v37.482H0z"/></g></g><g data-name="Grupo 52"><g data-name="Grupo 51" clip-path="url(#e-logo40)" transform="translate(374.743 531.531)"><path data-name="Rectángulo 50" fill="url(#f-logo40)" d="M0 0h33.825v23.769H0z"/></g></g><g data-name="Grupo 54"><g data-name="Grupo 53" clip-path="url(#b-logo40)" transform="translate(337 485.169)"><path data-name="Trazado 50" d="M45.274 35.566v-3.265H29.3a28.114 28.114 0 0 1 .479-3.265h15.5v-3.265H30.516c.348-1.088.7-2.177 1.132-3.265h13.626v-3.265H33.215a31.206 31.206 0 0 1 2-3.265h10.059v-3.265H37.7a38.509 38.509 0 0 1 3.265-3.265h4.353V2.133H25.9L0 36.48v13.453h29.123v19.24h16.151v-19.24h6.965V35.566Zm-26.729 0 10.578-14.1v14.1Z" fill="#ffd300"/></g></g></g><g transform="translate(593 451.555)" clip-path="url(#g-logo40)"><g data-name="Grupo 59"><path data-name="Trazado 51" d="M91.667 106.565H16.63v-75.04h75.037ZM20.245 35.147v67.809h67.807V35.147Z" fill="#fff"/><g data-name="Grupo 58"><g data-name="Grupo 57"><path data-name="Rectángulo 52" fill="gold" d="M20.245 35.147h67.807v67.81H20.245z"/><g data-name="Grupo 56" clip-path="url(#h-logo40)" transform="translate(20.245 35.147)"><g data-name="Grupo 55" fill="#dd171b" fill-rule="evenodd"><path data-name="Trazado 52" d="m67.806 13.021-16.287 3.262a31.284 31.284 0 0 1-17.012-2.207 32.347 32.347 0 0 0-10.75-3.912 26.963 26.963 0 0 0-7.606-.024l-10.87 1.945c-1.728.335-3.527.646-5.278.935V.679A15.286 15.286 0 0 1 8.377.488a21.371 21.371 0 0 1 4.483 2.016c3 1.591 5.878 3.479 9.238 4.224a29.932 29.932 0 0 0 14.2-.072l10.175-1.848 10.629-1.92 10.7-2.205Z"/><path data-name="Trazado 53" d="M14.207 52.167a31.387 31.387 0 0 1 20.563 2.184 26.2 26.2 0 0 0 17.876 3.239l15.159-2.736v12.292a17.736 17.736 0 0 1-6.473.552 13.8 13.8 0 0 1-3.432-.983l-7.87-4.127a26.282 26.282 0 0 0-15.26-1.776L2.209 66.789l-2.208.359V54.856l2.711-.552 7.126-1.32c1.446-.263 2.951-.528 4.367-.816Z"/><path data-name="Trazado 54" d="M-.004 32.462v-9.449l28.026-5.112a33.338 33.338 0 0 1 19.6 3.527 26.961 26.961 0 0 0 18.236 1.993l1.938-.406v9.454l-6.185-3.53a26.426 26.426 0 0 0-14.702-2.183L29.68 29.898a1406.99 1406.99 0 0 1-6.191 1.128l-15.693 2.9a11.082 11.082 0 0 1-7.8-1.464Z"/><path data-name="Trazado 55" d="M67.806 35.704v9.31l-27.781 5.112a33.342 33.342 0 0 1-19.6-3.527 26.952 26.952 0 0 0-18.237-1.991l-2.183.408v-9.31l6.431 3.384a26.438 26.438 0 0 0 14.708 2.183l17.229-3.144a1406.99 1406.99 0 0 1 6.191-1.128l15.693-2.9a11.06 11.06 0 0 1 7.553 1.607Z"/></g></g></g></g><path data-name="Trazado 56" d="M102.458 96.73V78.32h3c6.228 0 9.643 3.277 9.643 9.229 0 6.091-3.275 9.181-9.689 9.181Zm22.4-24.546v30.774h20.39V96.73h-13.52v-7.014h13.38v-6.23h-13.38v-5.122h13.518v-6.182Zm46.837 0-11.216 30.775h7.29l3.326-9.366h9.412l3.275 9.366h7.43l-11.441-30.774Zm4.059 6.363-2.86 9.092h5.768Zm91.177 8.677h-6.875v9.689a9.047 9.047 0 0 1-2.953.417c-5.261 0-9.135-4.107-9.135-9.689 0-6 4.107-10.011 10.2-10.011a16.112 16.112 0 0 1 8.766 2.677v-7.012a25.143 25.143 0 0 0-9.366-1.845c-9.965 0-16.886 6.689-16.886 16.286 0 9.458 6.781 15.872 16.886 15.872a27.957 27.957 0 0 0 9.369-1.616Zm34.739.278c0-9.183-6.828-15.872-16.148-15.872a15.941 15.941 0 1 0 .231 31.882c9.32 0 15.917-6.642 15.917-16.009Zm-16.052-9.6c-5.167 0-8.627 3.923-8.627 9.689s3.552 9.689 8.766 9.689c5.167 0 8.581-3.877 8.581-9.689s-3.511-9.687-8.724-9.687Zm18.712-5.721v30.774h7.013V83.346l12.407 19.609h6.507V72.181h-7.012l.009 19.139-11.911-19.139ZM121.256 50.49h-6.877v9.689a9.063 9.063 0 0 1-2.953.415c-5.259 0-9.135-4.107-9.135-9.689 0-6 4.107-10.011 10.2-10.011a16.127 16.127 0 0 1 8.766 2.675v-7.012a25.139 25.139 0 0 0-9.366-1.847c-9.965 0-16.886 6.689-16.886 16.287 0 9.457 6.782 15.869 16.886 15.869a27.975 27.975 0 0 0 9.369-1.615Zm34.706.276c0-9.181-6.828-15.871-16.148-15.871a15.941 15.941 0 1 0 .23 31.88c9.308 0 15.907-6.648 15.907-16.014Zm-16.051-9.6c-5.167 0-8.627 3.92-8.627 9.689s3.553 9.689 8.766 9.689c5.167 0 8.583-3.876 8.583-9.689s-3.524-9.692-8.737-9.692Zm18.358-5.721v30.774h12.734c6.782 0 10.749-3.369 10.749-9.136 0-3.967-2.26-6.827-6.413-8.027a6.746 6.746 0 0 0 4.194-6.321c.046-4.891-3.275-7.29-9.919-7.29Zm10.242 11.488c3 0 4.194-.831 4.194-2.907 0-1.984-1.157-2.721-4.428-2.721h-3v5.628Zm.923 13.015c3.413 0 4.889-1.062 4.889-3.553 0-2.583-1.523-3.6-5.167-3.6h-3.877v7.152Zm20.641-24.5h-6.9V66.23h6.875Zm2.993 0V66.23h20.39v-6.228h-13.52v-7.013h13.38v-6.228h-13.38V41.64h13.519v-6.182Zm108.666 15.317c0-9.181-6.828-15.871-16.148-15.871a15.94 15.94 0 1 0 .231 31.88c9.305-.006 15.9-6.65 15.9-16.017Zm-16.051-9.6c-5.167 0-8.627 3.92-8.627 9.689s3.552 9.689 8.766 9.689c5.167 0 8.581-3.876 8.581-9.689s-3.526-9.695-8.739-9.695ZM231.045 87.63l-2.907-9.092-2.86 9.092Zm-31.587 15.318V90.305h.876c4.429 0 4.891.461 7.842 8.073a15.422 15.422 0 0 0 .646 1.569l.6 1.43a13.757 13.757 0 0 0 .738 1.569h9.994l3.326-9.366h9.413l3.275 9.366h7.429l-11.441-30.774h-8.077l-9.093 24.957a129.684 129.684 0 0 1-2.24-4.933c-1.2-2.63-1.892-3.416-4.107-4.338a7.355 7.355 0 0 0 5.628-7.384c0-5.536-3.644-8.3-10.98-8.3h-10.886v30.774Zm0-18.456h3.044c2.953 0 4.429-1.061 4.429-3.275s-1.339-3.181-4.338-3.181h-3.138Zm24.024-18.283V53.568h.875c4.429 0 4.891.461 7.844 8.073a15.089 15.089 0 0 0 .647 1.569l.6 1.43a13.66 13.66 0 0 0 .737 1.569h13.851l.039-19.742 12.371 19.742h6.507V35.435h-7.012l.03 18.88-11.933-18.88h-7.015v28.649a64.051 64.051 0 0 1-4.254-8.622c-1.2-2.629-1.89-3.412-4.105-4.338a7.353 7.353 0 0 0 5.628-7.375c0-5.537-3.646-8.3-10.981-8.3h-10.889V66.23Zm0-18.455h3.046c2.951 0 4.428-1.062 4.428-3.276s-1.336-3.181-4.338-3.181h-3.139Zm-128 24.42v30.774h10.287c10.426 0 16.563-5.721 16.563-15.411 0-9.644-6.275-15.365-16.932-15.365Z" fill="#161615" fill-rule="evenodd"/></g></g></g></g></svg>',
+      "subnav": {
+        "text": "Carpeta del gestor"
+      },
+      "navigation": {
+        "items": [
+          {
+            "href": "#1",
+            "text": "Navigation item 1"
+          },
+          {
+            "href": "#2",
+            "text": "Navigation item 2",
+            "active": true
+          },
+          {
+            "href": "#3",
+            "text": "Navigation item 3"
+          },
+          {
+            "href": "#4",
+            "text": "Navigation item 4"
+          }
+          ]
+      }
+    }
+  },
+  {
+    "name": "con offcanvas",
+    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller",
+    "data": {
+      "homepageUrl": "/",
+      "subnav": {
+        "text": "Carpeta del gestor"
+      },
+      "offcanvas": {
+        "text": "Menú",
+        "textClose": "Cerrar menu",
+        "labelledId": "offcanvas-title"
+      },
+      "caller": exampleOffcanvas
+    }
+  },
+  {
+    "name": "con subnav text",
+    "description": "Utilizar para mostrar el nombre de la app actual. Si no se proporcionan items en subnav, el texto será simple sin un dropdown.",
+    "data": {
+      "homepageUrl": "/",
+      "subnav": {
+        "text": "Carpeta del gestor"
+      }
+    }
+  },
+  {
+    "name": "con subnav items",
+    "description": "Un dropdown junto al logo que ha de usarse para mostrar el nombre de la app en la que estamos y para navegar a otra app diferente. Usamos los items proporcionados para la navegación.",
+    "data": {
+      "homepageUrl": "/",
+      "subnav": {
+        "text": "Carpeta del gestor",
+        "items": [
+          {
+            "href": "#",
+            "text": "Carpeta del gestor",
+            "active": true
+          },
+          {
+            "href": "#",
+            "text": "Catálogo de servicios"
+          },
+          {
+            "href": "#",
+            "text": "Bandeja de entrada"
+          },
+          {
+            "href": "#",
+            "text": "Sistema de comprobación y verificación de documentos por CSV"
+          }
+        ]
+      }
+    }
+  },
+  {
+    "name": "con dropdown",
+    "description": "Un dropdown a la derecha que puede usarse para mostrar información adicional: login, acerca de... Se oculta por defecto en anchuras pequeñas si no se le añaden clases a dropdown.",
+    "data": {
+      "homepageUrl": "/",
+      "dropdown": {
+        "text": "Marta Pérez",
+        "items": [
+          {
+          "text": "Perfil",
+          "href": "/"
+          },
+          {
+          "text": "Cerrar sesión",
+          "href": "/"
+          }
+        ]
+      }
+    }
+  },
+  {
+    "name": "con dropdown personalizado",
+    "description": "Se pueden usar los parámetros del dropdown para personalizarlo. En este ejemplo con html en el dropdown.",
+    "data": {
+      "homepageUrl": "/",
+      "dropdown": {
+        "html": '<span class="block text-right">Marta Pérez <br>(Administración)</span>',
+        "items": [
+          {
+          "text": "Perfil",
+          "href": "/"
+          },
+          {
+          "text": "Cerrar sesión",
+          "href": "/"
+          }
+        ]
+      }
+    }
+  },
+  {
+    "name": "con contenido personalizado en dropdown",
+    "description": "El dropdown puede contener cualquier tipo de información.",
+    "data": {
+      "homepageUrl": "/",
+      "dropdown": {
+        "text": "Marta Pérez",
+        "contentHtml": '<div class="p-base"><dl><dt class="text-base">Marta Pérez</dt><dd class="text-sm text-neutral-dark">Departamento de Ciencia, Universidad y Sociedad del Conocimiento</dd></dl></div>',
+        "classesTooltip": "w-64 max-h-48 overflow-y-auto"
+      }
+    }
+  },
+  {
+    "name": "con todo",
+    "description": "Logo, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.",
+    "data": {
+      "homepageUrl": "/",
+      "expandedLogo": true,
+      "subnav": {
+        "text": "Carpeta del gestor",
+        "items": [
+          {
+            "href": "#",
+            "text": "Carpeta del gestor",
+            "active": true
+          },
+          {
+            "href": "#",
+            "text": "Catálogo de servicios"
+          },
+          {
+            "href": "#",
+            "text": "Bandeja de entrada"
+          },
+          {
+            "href": "#",
+            "text": "Sistema de comprobación y verificación de documentos por CSV"
+          }
+        ]
+      },
+      "navigation": {
+        "items": [
+          {
+            "href": "#1",
+            "text": "Navigation item 1"
+          },
+          {
+            "href": "#2",
+            "text": "Navigation item 2",
+            "active": true
+          },
+          {
+            "href": "#3",
+            "text": "Navigation item 3"
+          }
+          ]
+      },
+      "dropdown": {
+        "text": "Marta Pérez",
+        "items": [
+          {
+          "text": "Perfil",
+          "href": "/"
+          },
+          {
+          "text": "Cerrar sesión",
+          "href": "/"
+          }
+        ]
+      },
+      "offcanvas": {
+        "text": "Menú",
+        "textClose": "Cerrar menu"
+      },
+      "caller": exampleOffcanvas
+    }
+  },
+  {
+    "name": "email template example",
+    "description": "Ejemplo de uso en platilla de email por defecto. Sólo con logo expandido.",
+    "data": {
+      "homepageUrl": "https://www.aragon.es/",
+      "expandedLogo": true
+    }
+  }
+] %}