desy-html 12.0.0 → 12.1.0

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

@@ -1,542 +1,543 @@
-{% 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"
-    }
-  }) | indent(12)  }}
-{% endset %}
-
-{% set exampleOffcanvas %}
-
-  <nav class="w-full p-2" aria-label="Menú móvil">
-    <h3 class="p-base text-base font-bold">Gestor de expedientes</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": "Gestor de expedientes",
-              "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": "por defecto",
-    "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. Puedes usar con javascript la función global <code>activateItemHeaderNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemHeaderNavigation('header-nav-item', 'page-catalogo')</code> para desactivar el item actual y activar el tercer item del header de la página.",
-    "data": {
-      "homepageUrl": "/",
-      "idPrefix": "mi-menu",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes"
-      },
-      "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 navegación personalizada",
-    "description": "Tras nuestro menú de navegación tenemos <code>customNavigationHtml</code> una zona anidable para poder añadir una navegación personalizada.",
-    "data": {
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes"
-      },
-      "customNavigationHtml": "<div class='flex flex-wrap flex-1 gap-base'>"+ navigationCustom | safe + "</div>"
-    }
-  },
-  {
-    "name": "con navegación personalizada a la derecha",
-    "description": "En el <code>customNavigationHtml</code> podemos añadir elementos posicionados a la derecha.",
-    "data": {
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes"
-      },
-      "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": "con enlace de skipLink personalizado",
-    "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": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes"
-      },
-      "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": "logo expandido",
-    "description": "Con el parámetro <code>'expandedLogo': true</code> se muestra el logo del Gobierno de Aragón en formato expandido. Utilizar este logotipo en apps que estén dirigidas al ciudadano y también antes de hacer login en todas las apps.",
-    "data": {
-      "homepageUrl": "/",
-      "expandedLogo": true
-    }
-  },
-  {
-    "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": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes"
-      },
-      "offcanvas": {
-        "text": "Menú",
-        "textClose": "Cerrar menu",
-        "labelledId": "offcanvas-title"
-      },
-      "caller": exampleOffcanvas | indent(14)
-    }
-  },
-  {
-    "name": "con offcanvas y mobileTitle",
-    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller y título que sólo se muestra en mobile.",
-    "data": {
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes"
-      },
-      "offcanvas": {
-        "text": "Menú",
-        "textClose": "Cerrar menu",
-        "labelledId": "offcanvas-title"
-      },
-      "caller": exampleOffcanvas | indent(14)
-    }
-  },
-  {
-    "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": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes"
-      }
-    }
-  },
-  {
-    "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": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes",
-        "items": [
-          {
-            "href": "#",
-            "text": "Gestor de expedientes",
-            "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, normalmante relativa a la cuenta de usuario, como: Perfil y Cerrar sesión. Se oculta por defecto en anchuras pequeñas si no se le añaden clases a dropdown.",
-    "data": {
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "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": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "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": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "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",
-        "attributes": {
-          "data-aria-haspopup": "dialog",
-          "data-role": "dialog",
-          "data-aria-modal": "false",
-          "data-aria-label": "Información adicional"
-        }
-      }
-    }
-  },
-  {
-    "name": "con todo",
-    "description": "Logo, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.",
-    "data": {
-      "homepageUrl": "/",
-      "mobileTitle": {
-        "text": "Gestor de expedientes"
-      },
-      "subnav": {
-        "text": "Gestor de expedientes",
-        "items": [
-          {
-            "href": "#",
-            "text": "Gestor de expedientes",
-            "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 | indent(14)
-    }
-  },
-  {
-    "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
-    }
-  }
+{% 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": "Menú principal"
+    }
+  }) | indent(12)  }}
+{% endset %}
+
+{% set exampleOffcanvas %}
+
+  <nav class="w-full p-2" aria-label="Menú móvil">
+    <h3 class="p-base text-base font-bold">Gestor de expedientes</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": "Gestor de expedientes",
+              "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": "por defecto",
+    "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. Puedes usar con javascript la función global <code>activateItemHeaderNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemHeaderNavigation('header-nav-item', 'page-catalogo')</code> para desactivar el item actual y activar el tercer item del header de la página.",
+    "data": {
+      "homepageUrl": "/",
+      "idPrefix": "mi-menu",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes"
+      },
+      "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 navegación personalizada",
+    "description": "Tras nuestro menú de navegación tenemos <code>customNavigationHtml</code> una zona anidable para poder añadir una navegación personalizada.",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes"
+      },
+      "customNavigationHtml": "<div class='flex flex-wrap flex-1 gap-base'>"+ navigationCustom | safe + "</div>"
+    }
+  },
+  {
+    "name": "con navegación personalizada a la derecha",
+    "description": "En el <code>customNavigationHtml</code> podemos añadir elementos posicionados a la derecha.",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes"
+      },
+      "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' role='img'><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": "con enlace de skipLink personalizado",
+    "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": {
+          "id": "skip-link",
+          "attr-example": "custom-data"
+        }
+      },
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes"
+      },
+      "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": "logo expandido",
+    "description": "Con el parámetro <code>'expandedLogo': true</code> se muestra el logo del Gobierno de Aragón en formato expandido. Utilizar este logotipo en apps que estén dirigidas al ciudadano y también antes de hacer login en todas las apps.",
+    "data": {
+      "homepageUrl": "/",
+      "expandedLogo": true
+    }
+  },
+  {
+    "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": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes"
+      },
+      "offcanvas": {
+        "text": "Menú",
+        "textClose": "Cerrar menu",
+        "labelledId": "offcanvas-title"
+      },
+      "caller": exampleOffcanvas | indent(14)
+    }
+  },
+  {
+    "name": "con offcanvas y mobileTitle",
+    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller y título que sólo se muestra en mobile.",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes"
+      },
+      "offcanvas": {
+        "text": "Menú",
+        "textClose": "Cerrar menu",
+        "labelledId": "offcanvas-title"
+      },
+      "caller": exampleOffcanvas | indent(14)
+    }
+  },
+  {
+    "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": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes"
+      }
+    }
+  },
+  {
+    "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": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes",
+        "items": [
+          {
+            "href": "#",
+            "text": "Gestor de expedientes",
+            "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, normalmante relativa a la cuenta de usuario, como: Perfil y Cerrar sesión. Se oculta por defecto en anchuras pequeñas si no se le añaden clases a dropdown.",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "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": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "dropdown": {
+        "html": "<span class='block text-right'><span class='block'>Marta Pérez</span> <span class='block'>(Administración)</span></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": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "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",
+        "attributes": {
+          "data-aria-haspopup": "dialog",
+          "data-role": "dialog",
+          "data-aria-modal": "false",
+          "data-aria-label": "Información adicional"
+        }
+      }
+    }
+  },
+  {
+    "name": "con todo",
+    "description": "Logo, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.",
+    "data": {
+      "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
+      "subnav": {
+        "text": "Gestor de expedientes",
+        "items": [
+          {
+            "href": "#",
+            "text": "Gestor de expedientes",
+            "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 | indent(14)
+    }
+  },
+  {
+    "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
+    }
+  }
 ] %}