DESY

Sistema de Diseño del Gobierno de Aragón.

Volver

Índice de páginas

Encabezados de página

Patrones de componente

Los patrones de encabezados suelen estar al principio de la página, tras la cabecera y suelen incluir el título de la página y algún elemento interactivo o de navegación adicional. Si encuentras en el código algún include, ve a buscarlo a los patrones de acciones.

Índice de apartados de esta página

Title de la página

Es el texto que aparece en la pestaña del navegador. Debe ser distinta para cada una de las páginas de tu web.

En el include head de la plantilla se encuentra una variable que podemos definir con un {% set title = "title" %}. Utiliza la estructura [Sección/palabra clave]. [Nombre del sitio web] para optimizar la encontrabilidad.

Mostrar código del ejemplo: includes/_pattern.ejemplo-title.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.ejemplo-title.njk

{% set title = "Patrones de encabezados de página. DESY. Sistema de diseño del Gobierno de Aragón." %}

<!doctype html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title if title else "Project title" }}</title>
  <link rel="icon" type="image/x-icon" href="https://aplicaciones.aragon.es/favicon.ico">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
</head>
<!-- /page.head -->

Titulo con acciones de página

Compuesto por un título y acciones (primaria, secundaria y terciarias) asociadas a la página en la que estamos.

Titulo de página (h1)

Acciones de página

Mostrar código del ejemplo: includes/_pattern.titulo-acciones-de-pagina.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.titulo-acciones-de-pagina.njk

{% from "components/button/_macro.button.njk" import componentButton %}
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% from "components/nav/_macro.nav.njk" import componentNav %}

<div class="pb-lg"></div>
<div class="lg:flex lg:flex-wrap w-full mb-base">
  <h1 id="page-title-1" class="c-h1 flex-1">Titulo de página (h1)</h1>
  <section class="mt-base mb-base lg:mt-0 lg:mb-0 lg:ml-auto lg:pl-base" aria-labelledby="acciones-de-pagina-1">
    <h2 id="acciones-de-pagina-1" class="sr-only">Acciones de página</h2>
    {#
      Patrones > Acciones > Primaria, secundaria y terciarias
    #}
    <ul class="flex flex-column-reverse lg:flex-row-reverse flex-wrap gap-sm">
      <li>
        {{ componentButton({
        "text": "Acción principal",
        "classes": "c-button--primary"
        })  }}
      </li>
      <li>
        {{ componentButton({
        "text": "Acción secundaria"
        })  }}
      </li>
      <li>
        {% call componentDropdown({
          "text": "Más acciones"
        })  %}
          {{ componentNav({
            "hasNav": false,
            "idPrefix": "mas-acciones-de-pagina-1",
            "items": [
              {
                "href": "#",
                "text": "Acción terciaria 1"
              },
              {
                "href": "#",
                "text": "Acción terciaria 2"
              },
              {
                "href": "#",
                "text": "Acción terciaria 3",
                "divider": true
              },
              {
                "href": "#",
                "text": "Otras acciones..."
              }
            ],
            "classes": "w-max max-w-64",
            "attributes": {
              "aria-label": "Más acciones"
            }
          })  }}
        {% endcall %}
      </li>
    </ul>
    {#
      /Patrones > Acciones > Primaria, secundaria y terciarias
    #}
  </section>
</div>

Titulo con acciones de página y buscador

Compuesto por un título y acciones (primaria, secundaria y terciarias) asociadas a la página en la que estamos y un buscador general.

Titulo de página (h1)

Búsqueda

Mostrar código del ejemplo: includes/_pattern.titulo-acciones-buscador-de-pagina.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.titulo-acciones-buscador-de-pagina.njk

{% from "components/button/_macro.button.njk" import componentButton %}
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% from "components/nav/_macro.nav.njk" import componentNav %}
{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}

<div class="pb-lg"></div>
<div class="lg:flex lg:flex-wrap w-full">
  <h1 id="page-title-2" class="c-h1 flex-1">Titulo de página (h1)</h1>
  <div class="lg:order-3 w-full mb-base lg:mb-lg">
    {#
      Patrones > Acciones > Buscar en el sitio
    #}
    <div class="lg:w-1/2">
      <h2 class="sr-only">Búsqueda</h2>
      <form action="#">
        {{ componentSearchbar({
          "id": "searchbar-home",
          "label": {
            "text": "Buscar"
          },
          "placeholder": "Introduce un término de búsqueda",
          "button": {
            "text": "Buscar",
            "type": "submit",
            "classes": "c-button"
          },
          "classes": "flex-1"
        }) }}
      </form>
    </div>
    {#
      /Patrones > Acciones > Buscar en el sitio
    #}
  </div>
  {#
    Patrones > Acciones > Primaria, secundaria y terciarias
  #}
  <ul class="flex flex-column-reverse lg:flex-row-reverse flex-wrap gap-sm">
    <li>
      {{ componentButton({
      "text": "Acción primaria",
      "classes": "c-button--primary"
      })  }}
    </li>
    <li>
      {{ componentButton({
      "text": "Acción secundaria"
      })  }}
    </li>
    <li>
      {% call componentDropdown({
        "text": "Más acciones"
      })  %}
        {{ componentNav({
          "hasNav": false,
          "idPrefix": "mas-acciones-de-pagina-2",
          "items": [
            {
              "href": "#",
              "text": "Acción terciaria 1"
            },
            {
              "href": "#",
              "text": "Acción terciaria 2"
            },
            {
              "href": "#",
              "text": "Acción terciaria 3",
              "divider": true
            },
            {
              "href": "#",
              "text": "Otras acciones..."
            }
          ],
          "classes": "w-max max-w-64",
          "attributes": {
            "aria-label": "Más acciones"
          }
        })  }}
      {% endcall %}
    </li>
  </ul>
  {#
    /Patrones > Acciones > Primaria, secundaria y terciarias
  #}
</div>

Titulo con pasos y botón de volver atrás

Compuesto por un título con pasos y botón de volver atrás.

Volver

Titulo de página (h1)

Paso 1 de 3

Acciones de página

Mostrar código del ejemplo: includes/_pattern.titulo-con-pasos-y-boton-de-volver-atras.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.titulo-con-pasos-y-boton-de-volver-atras.njk

{% from "components/button/_macro.button.njk" import componentButton %}
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% from "components/nav/_macro.nav.njk" import componentNav %}

<div class="my-base">
  {{ componentButton({
    "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z" fill="currentColor"></path></svg>Volver',
    "classes": "c-button--transparent",
    "href": "/"
  })  }}
</div>
<div class="lg:flex lg:flex-wrap w-full mb-base items-center">
  <div class="flex flex-col-reverse">
    <h1 id="page-title-3" class="c-h1 w-full mb-0">Titulo de página (h1)</h1>
    <p class="c-paragraph-base mb-0 text-neutral-dark">Paso 1 de 3</p>
  </div>
  <section class="mt-base mb-base lg:mt-0 lg:mb-0 lg:ml-auto lg:pl-base" aria-labelledby="acciones-de-pagina-3">
    <h2 id="acciones-de-pagina-3" class="sr-only">Acciones de página</h2>
    {#
      Patrones > Acciones > Siguiente paso y restaurar
    #}
    <ul class="flex flex-col-reverse lg:flex-row-reverse flex-wrap gap-sm">
      <li>
        {{ componentButton({
        "text": "Siguiente paso",
        "classes": "c-button--primary",
        "type": "submit"
        })  }}
      </li>
      <li>
        {{ componentButton({
        "text": "Restaurar"
        })  }}
      </li>
    </ul>
  </section>
  {#
    /Patrones > Acciones de página > Siguiente paso y restaurar
  #}
</div>