Índice de páginas
- Cómo pedimos información
- Cómo mostramos información
- Ayudar a resolver
- Páginas y flujos
- Cómo pedimos información
- Cómo mostramos información
- Ayudar a resolver
- Páginas y flujos
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 #
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>
<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>
HTML del ejemplo: includes/_pattern.titulo-con-pasos-y-boton-de-volver-atras.njk
<div class="my-base">
<!-- button -->
<a href="/" draggable="false" class="c-button c-button--transparent">
<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
</a>
<!-- /button -->
</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>
<ul class="flex flex-wrap gap-sm">
<li>
<!-- button -->
<button class="c-button">
Restaurar
</button>
<!-- /button -->
</li>
<li>
<!-- button -->
<button type="submit" class="c-button c-button--primary">
Siguiente paso
</button>
<!-- /button -->
</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
- Patrón de volver atrás
- Patrón de grupo de acciones
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 #
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/_acciones-de-cabecera.njk" %}
<!-- /headerActionsEditBlock -->
</div>
</div>
</header>
HTML del ejemplo: includes/_pattern.cabecera-editar.njk
<header class=" z-40 bg-white border-b border-neutral-base">
<div class="container mx-auto px-base ">
<!-- headerSkipLinkBlock -->
<!-- skip-link -->
<a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline">Saltar al contenido principal</a>
<!-- /skip-link -->
<!-- /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 -->
<nav aria-labelledby="acciones-de-cabecera">
<p class="sr-only" id="acciones-de-cabecera">Menú de acciones</p>
<ul class="flex flex-wrap flex-column-reverse lg:flex-row-reverse gap-sm lg:items-center lg:ml-auto lg:pl-base">
<li>
<!-- button -->
<a href="#" draggable="false" class="c-button c-button--primary c-button--sm">
Guardar y salir
</a>
<!-- /button -->
</li>
<li>
<!-- button -->
<a href="#" draggable="false" class="c-button c-button--sm">
Guardar
</a>
<!-- /button -->
</li>
<li>
<!-- button -->
<a href="#" draggable="false" class="c-button c-button--sm">
Salir
</a>
<!-- /button -->
</li>
</ul>
</nav>
<!-- /headerActionsEditBlock -->
</div>
</div>
</header>
Cuando lo utilizamos
- En plantillas para edición de contenido. Sustituye al header del sitio web para impedir la navegación hasta que el usuario guarde o descarte los cambios.
Qué componentes utilizamos
- Skip-link
- Patrón de grupo de acciones
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 #
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>
HTML del ejemplo: includes/_pattern.titulo-acciones-buscador-de-pagina.njk
<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">
<div class="lg:w-1/2">
<h2 class="sr-only">Búsqueda</h2>
<form action="#">
<!-- searchbar -->
<!-- label -->
<label class="block sr-only undefined" for="searchbar-home">Buscar</label>
<!-- /label -->
<div class="relative flex flex-wrap items-end gap-sm">
<input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base flex-1" id="searchbar-home" name="searchbar-home" type="search" placeholder="Introduce un término de búsqueda">
<!-- button -->
<button type="submit" class="c-button c-button">
Buscar
</button>
<!-- /button -->
</div>
<!-- /searchbar -->
</form>
</div>
</div>
<ul class="flex flex-column-reverse lg:flex-row-reverse flex-wrap gap-sm">
<li>
<!-- button -->
<button class="c-button c-button--primary">
Acción primaria
</button>
<!-- /button -->
</li>
<li>
<!-- button -->
<button class="c-button">
Acción secundaria
</button>
<!-- /button -->
</li>
<li>
<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
<button class="c-dropdown" data-module="c-dropdown-button" aria-haspopup="true">
<span class="inline-flex self-center max-w-xs align-middle truncate">Más acciones</span>
<svg class="inline-block -mr-2 align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
<g>
<path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
</g>
</svg></button>
<div class="-ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
<!-- nav -->
<ul data-module="c-nav" class="text-sm w-max max-w-64" aria-label="Más acciones">
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="mas-acciones-de-pagina-2-1">
Acción terciaria 1
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="mas-acciones-de-pagina-2-2">
Acción terciaria 2
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="mas-acciones-de-pagina-2-3">
Acción terciaria 3
</a>
</li>
<li class="my-sm border-b border-neutral-base" aria-hidden="true">
<div class="sr-only">Separador</div>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="mas-acciones-de-pagina-2-4">
Otras acciones...
</a>
</li>
</ul>
<!-- /nav -->
</div>
</div>
<!-- /dropdown -->
</li>
</ul>
</div>
Cuando lo utilizamos
- En aplicaciones con items para realizar acciones en lote
- En aplicaciones con tablas avanzadas para realizar acciones en lote
Qué componentes utilizamos
- Patrón de buscar
- Patrón de grupo de acciones
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.