DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Títulos y encabezados

Cómo mostramos información

Encabezados de primer nivel al principio de la página.

Casos de uso

Encabezados con subtítulo

Volver

Título 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">Título 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>
    <ul class="flex flex-wrap gap-sm">
      <li>
        {{ componentButton({
        "text": "Restaurar"
        })  }}
      </li>
      <li>
        {{ componentButton({
        "text": "Siguiente paso",
        "classes": "c-button--primary",
        "type": "submit"
        })  }}
      </li>
    </ul>
  </section>
</div>

Cuando lo utilizamos

  • Al inicio de formularios por pasos. El subtítulo muestra el paso en el que se encuentra la persona.
  • En páginas de contenido dentro de una sección. El subtítulo muestra la sección a la que pertenece.

Qué componentes utilizamos

Qué debes tener en cuenta

  • Para respetar la jerarquía de encabezados de la página, en el código colocamos el encabezado <h1> primero y después un párrafo con el subtítulo. Después les cambiamos la posición visualmente mediante la clase .flex-col-reverse.
  • En anchuras pequeñas apilamos el título y las acciones.

Encabezados para edición de contenido

Saltar al contenido principal

Editando item Título del item editado (h1)

Menú de acciones

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

Contenido

Nunjucks macro del ejemplo: includes/_pattern.cabecera-editar.njk

{% from "components/button/_macro.button.njk" import componentButton %}
{% from "components/skip-link/_macro.skip-link.njk" import componentSkipLink %}

<header class=" z-40 bg-white border-b border-neutral-base">
  <div class="container mx-auto px-base ">
    <!-- headerSkipLinkBlock -->
      {{ componentSkipLink({
        "text": "Saltar al contenido principal",
        "href": "#content"
      })  }}
    <!-- /headerSkipLinkBlock -->
    <div class="lg:flex lg:flex-wrap lg:w-full py-base">
      <div class="w-full">
      </div>
      <div class="flex-1 mb-base lg:mb-0">
        <!-- headerTitleEditBlock -->
          <h1 class="uppercase">
            Editando item
            <span class="c-h3 block mt-xs normal-case">Título del item editado (h1)</span>
          </h1>
        <!-- /headerTitleEditBlock -->
      </div>
      <!-- headerActionsEditBlock -->
        {% include "includes/_pattern.acciones-de-cabecera.njk" %}
      <!-- /headerActionsEditBlock -->
    </div>
  </div>
</header>

Cuando lo utilizamos

Qué componentes utilizamos

Qué debes tener en cuenta

  • Este patrón ya se encuentra preconfigurado en las plantillas correspondientes.
  • Tanto subtítulo como subtítulo se encuentran dentro del encabezado <h1>.
  • En anchuras pequeñas apilamos el título y las acciones.

Otras acciones sobre la página

Título 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">Título 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>

Cuando lo utilizamos

Qué componentes utilizamos

Qué debes tener en cuenta

  • En anchuras pequeñas apilamos el título, la barra de búsqueda y el grupo de acciones, en ese orden.