desy-html

Header-mini

Mostrar parámetros

Parámetros del componente

              params:
- name: homepageUrl
  type: string
  required: false
  description: The url of the logo link. Defaults to `https://www.aragon.es/`
- name: customNavigationHtml
  type: string
  required: false
  description: HTML for the custom navigation area. If provided there will appear an embed area after the logo.
- name: hasContainer
  type: boolean
  required: false
  description: Defaults to `true`. If `false` the header won't use container class.
- name: containerClasses
  type: string
  required: false
  description: Classes for the container, useful if you want to make the header fixed width.
- name: classes
  type: string
  required: false
  description: Classes to add to the header-mini.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the header-mini.

Por defecto

Este es el mini header por defecto. Una barra con logo del Gobierno de Aragón que enlaza al portal de la administración. Deberían usarse en todos los sitios web que tengan subdominio aragon.es.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/header-mini/_macro.header-mini.njk" import componentHeaderMini %}

{{ componentHeaderMini({}) }}

Sin clase contenedora

Usa el parámetro "hasContainer": false 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.

Mostrar códigodel ejemplo: Sin clase contenedora

Contenido

Nunjucks macro

{% from "components/header-mini/_macro.header-mini.njk" import componentHeaderMini %}

{{ componentHeaderMini({
  "hasContainer": false
}) }}

Con contenido personalizado tras el logotipo.

Usa el parámetro customNavigationHtml para añadir contenido tras el logotipo. En este ejemplo se ha colocado un logotipo de la UE a la derecha.

Logo de la Unión Europea
Mostrar códigodel ejemplo: Con contenido personalizado tras el logotipo.

Contenido

Nunjucks macro

{% from "components/header-mini/_macro.header-mini.njk" import componentHeaderMini %}

{{ componentHeaderMini({
  "customNavigationHtml": "<div class=\"flex-1 text-right\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"36\" viewBox=\"0 0 148 121\" class=\"relative top-0.5 inline-block fill-current\" aria-label=\"Unión Europea\" role=\"img\"><title>Logo de la Unión Europea</title><defs><clipPath id=\"a-logo-UE\"><path d=\"M0 0h148v121H0z\"/></clipPath></defs><g clip-path=\"url(#a-logo-UE)\"><path d=\"M11.737 107.263H13.9v5.815a12.063 12.063 0 0 0 .081 1.794 1.739 1.739 0 0 0 .663 1.058 2.309 2.309 0 0 0 1.432.4 2.185 2.185 0 0 0 1.392-.377 1.49 1.49 0 0 0 .564-.927 12.08 12.08 0 0 0 .1-1.824v-5.94H20.3v5.638a14.491 14.491 0 0 1-.176 2.732 3.024 3.024 0 0 1-.648 1.348 3.275 3.275 0 0 1-1.263.875 5.5 5.5 0 0 1-2.065.326 5.947 5.947 0 0 1-2.333-.355 3.336 3.336 0 0 1-1.256-.923 2.958 2.958 0 0 1-.608-1.19 13.04 13.04 0 0 1-.212-2.725ZM22.606 118v-10.737h2.109l4.395 7.17v-7.17h2.014V118h-2.175l-4.329-7v7Zm10.745 0v-10.737h2.168V118Zm3.794-5.3a6.829 6.829 0 0 1 .491-2.754 5.053 5.053 0 0 1 1-1.472 4.18 4.18 0 0 1 1.388-.967 5.9 5.9 0 0 1 2.314-.425 5.041 5.041 0 0 1 3.8 1.472 5.642 5.642 0 0 1 1.422 4.092 5.624 5.624 0 0 1-1.414 4.069 5 5 0 0 1-3.779 1.468 5.053 5.053 0 0 1-3.809-1.461 5.545 5.545 0 0 1-1.413-4.022Zm2.234-.073a4.023 4.023 0 0 0 .842 2.765 2.744 2.744 0 0 0 2.139.941 2.721 2.721 0 0 0 2.127-.933 4.1 4.1 0 0 0 .831-2.8 4.037 4.037 0 0 0-.809-2.754 2.738 2.738 0 0 0-2.15-.908 2.757 2.757 0 0 0-2.161.919 4.057 4.057 0 0 0-.82 2.767Zm1.641-5.977 1.011-2.19h2.307l-2.014 2.19ZM49.273 118v-10.737h2.109l4.395 7.17v-7.17h2.014V118h-2.175l-4.329-7v7Zm14.978 0v-10.737h7.961v1.816h-5.793v2.38h5.391v1.809h-5.391v2.922h6V118Zm9.991-10.737h2.168v5.815a12.063 12.063 0 0 0 .08 1.795 1.739 1.739 0 0 0 .663 1.058 2.309 2.309 0 0 0 1.432.4 2.185 2.185 0 0 0 1.392-.377 1.49 1.49 0 0 0 .564-.927 12.08 12.08 0 0 0 .1-1.824v-5.94H82.8v5.637a14.491 14.491 0 0 1-.176 2.732 3.024 3.024 0 0 1-.644 1.35 3.275 3.275 0 0 1-1.263.875 5.5 5.5 0 0 1-2.066.326 5.947 5.947 0 0 1-2.333-.355 3.336 3.336 0 0 1-1.256-.923 2.958 2.958 0 0 1-.608-1.19 13.04 13.04 0 0 1-.212-2.725ZM85.1 118v-10.737h4.563a7.81 7.81 0 0 1 2.5.289 2.467 2.467 0 0 1 1.249 1.029 3.093 3.093 0 0 1 .469 1.692 2.866 2.866 0 0 1-.71 2 3.412 3.412 0 0 1-2.124.992 5.058 5.058 0 0 1 1.161.9 12.237 12.237 0 0 1 1.234 1.743L94.75 118h-2.593l-1.568-2.336a15.156 15.156 0 0 0-1.143-1.578 1.664 1.664 0 0 0-.652-.447 3.573 3.573 0 0 0-1.094-.121h-.439V118Zm2.168-6.2h1.6a8.283 8.283 0 0 0 1.948-.132 1.168 1.168 0 0 0 .608-.454 1.4 1.4 0 0 0 .22-.806 1.287 1.287 0 0 0-.289-.875 1.328 1.328 0 0 0-.817-.421q-.264-.037-1.582-.037h-1.692Zm8.218.894a6.829 6.829 0 0 1 .491-2.754 5.053 5.053 0 0 1 1-1.472 4.18 4.18 0 0 1 1.383-.968 5.9 5.9 0 0 1 2.314-.425 5.041 5.041 0 0 1 3.8 1.472 5.642 5.642 0 0 1 1.426 4.099 5.624 5.624 0 0 1-1.414 4.069 5 5 0 0 1-3.786 1.468 5.053 5.053 0 0 1-3.8-1.461 5.545 5.545 0 0 1-1.418-4.022Zm2.234-.073a4.023 4.023 0 0 0 .842 2.765 2.744 2.744 0 0 0 2.138.944 2.721 2.721 0 0 0 2.124-.93 4.1 4.1 0 0 0 .831-2.8 4.037 4.037 0 0 0-.809-2.754 2.738 2.738 0 0 0-2.15-.908 2.757 2.757 0 0 0-2.161.919 4.057 4.057 0 0 0-.819 2.767Zm9.869 5.379v-10.737h3.479a12.616 12.616 0 0 1 2.578.161 2.815 2.815 0 0 1 1.545 1.051 3.333 3.333 0 0 1 .623 2.091 3.5 3.5 0 0 1-.359 1.663 2.944 2.944 0 0 1-.912 1.058 3.142 3.142 0 0 1-1.124.509 12.375 12.375 0 0 1-2.249.154h-1.413V118Zm2.168-8.921v3.047h1.187a5.606 5.606 0 0 0 1.714-.168 1.423 1.423 0 0 0 .677-.527 1.443 1.443 0 0 0 .245-.831 1.387 1.387 0 0 0-.344-.967 1.5 1.5 0 0 0-.872-.476 10.42 10.42 0 0 0-1.56-.073Zm7.837 8.921v-10.737h7.961v1.816h-5.793v2.38h5.391v1.809h-5.391v2.922h6V118Zm19.687 0h-2.358l-.937-2.439h-4.293l-.886 2.439h-2.3l4.182-10.737h2.292Zm-3.991-4.248-1.48-3.984-1.45 3.984ZM2.83 2.741h141.523v94.35H2.83z\" fill=\"#039\"/><g fill=\"#fc0\"><path d=\"m70.576 23.298 2.986-2.179 2.987 2.179-1.136-3.524 3.033-2.179h-3.739l-1.144-3.567-1.144 3.571h-3.737l3.031 2.179ZM55.121 27.45l2.986-2.179 2.984 2.179-1.134-3.524 3.031-2.179h-3.739l-1.144-3.571-1.144 3.575h-3.737l3.031 2.179ZM46.8 29.508l-1.144 3.575h-3.737l3.031 2.179-1.136 3.524 2.986-2.179 2.986 2.179-1.136-3.524 3.031-2.179h-3.737ZM42.652 52.039l2.984 2.179-1.134-3.524 3.031-2.179h-3.737l-1.144-3.571-1.144 3.579-3.739-.008 3.033 2.179-1.136 3.524ZM47.945 63.997l-1.144-3.571-1.144 3.575H41.92l3.031 2.179-1.136 3.524 2.986-2.183 2.986 2.183-1.136-3.524 3.031-2.179ZM59.274 75.324l-1.144-3.567-1.142 3.571h-3.739l3.031 2.179-1.135 3.524 2.986-2.179 2.984 2.179-1.134-3.524 3.031-2.179ZM74.709 79.43l-1.144-3.571-1.142 3.575h-3.739l3.031 2.179-1.134 3.524 2.986-2.179 2.985 2.179-1.137-3.524 3.033-2.179ZM90.142 75.324 89 71.757l-1.146 3.571h-3.735l3.029 2.179-1.134 3.524L89 78.852l2.986 2.179-1.138-3.524 3.033-2.179ZM101.475 63.997l-1.146-3.571-1.146 3.575h-3.735l3.033 2.179-1.138 3.524 2.986-2.183 2.986 2.183-1.138-3.524 3.033-2.179ZM109.316 48.471h-3.739l-1.146-3.571-1.142 3.575H99.55l3.033 2.179-1.134 3.524 2.982-2.183 2.986 2.183-1.134-3.524ZM97.343 38.736l2.986-2.179 2.986 2.179-1.138-3.524 3.033-2.175h-3.735l-1.146-3.571-1.146 3.575h-3.735l3.033 2.175ZM89.043 18.179l-1.142 3.575-3.739-.008 3.029 2.183-1.134 3.524 2.99-2.183 2.982 2.183-1.135-3.524 3.033-2.183h-3.743Z\"/></g></g></svg></div>"
}) }}