Pie de página

Código

Copiar el marcado

import "@luz-ds/catalog/components/page-footer.css";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-footer.min.css" integrity="sha384-jt0ORcEHERojNhPk2BjZ9bJ3A6cELFABApWGVM0vxUZRBxP3Ey+rPedqU+FdVuwx" crossorigin="anonymous">

Un párrafo después de la navegación entre páginas:

<p class="luz-page-footer">Last updated <time datetime="2026-10-17">17 October 2026</time> · <a href="https://example.com/edit/install.md">Edit this page</a> · <a href="https://example.com/issues/new">Report a problem</a></p>

Variantes y opciones

No hay modificadores. El pie es una clase aplicada a un <p> nativo.

Cómo funciona

CSS de components/page-footer.css de @luz-ds/catalog. Define la línea, el tamaño y el color; los datos los pones tú.

• El pie es un párrafo. Se ajusta al texto, así que en una pantalla estrecha los enlaces pasan a la línea siguiente.
• Los puntos medios son texto del marcado, entre la fecha y los enlaces.
• La fecha se incluye en un <time> con un datetime que puede leer una máquina y la misma fecha escrita con palabras.
• Los enlaces llevan a tu propia página de edición y a tu propia lista de problemas. LUZ no proporciona ninguna de las dos.

Sin JavaScript

No cambia nada. Es texto con dos enlaces y el paquete no incluye ningún script.

Teclado y ARIA

• Orden: la fecha es texto; con Tab llegas a «Editar esta página» y después a «Informar de un problema».
• Nombres: el texto de los enlaces permite entenderlos fuera de contexto. No lo acortes a «Editar» e «Informar».
• Fecha: <time datetime="2026-10-17"> ofrece la fecha en un formato que puede leer el software, junto a la fecha escrita que lee una persona.

La pestaña Diseño incluye Contraste y foco.

Diseño

Cuándo usarlo

Usa el pie debajo del contenido de todas las páginas que se mantienen, para que quien lee sepa cuándo se actualizaron y pueda corregirlas.

• Una página que cambia con el tiempo, como una guía o una referencia.
• Un sitio cuyas páginas están en un repositorio, donde «Editar esta página» puede abrir el archivo.

Cuándo no usarlo

No uses el pie de página para el pie del sitio: pertenece a una página concreta.

• El pie del sitio es un <footer>, hijo de la estructura.
• No muestres una fecha que no se mantenga actualizada: una fecha incorrecta es peor que no poner ninguna.

Qué hacer y qué no

Cómo escribir el contenido

• «Última actualización» y la fecha escrita con palabras, con el mes completo: «17 de octubre de 2026». Escríbela en el idioma de la página.
• Enlaces: «Editar esta página» e «Informar de un problema». Empieza por el verbo y escribe la frase completa.
• Mantén este orden: la fecha, el enlace para editar y el enlace para informar.

Contraste y foco

El texto y los enlaces se muestran sobre la superficie de la página. La línea superior es decorativa.

Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo es el de WCAG 2.2 AA: 4,5:1 para texto y 3:1 para anillos de foco, bordes e iconos.

• Foco: cada enlace conserva el anillo de core, de 2 px, --luz-focus-ring.
• Área de activación: cada enlace mide al menos 28px de alto, por encima del mínimo de 24px de WCAG 2.2 (2.5.8).
• Bordes: la línea sobre el pie (--luz-divider) es decorativa y no tiene un mínimo.

Tokens que usa

Los 6 tokens que leen las reglas de .luz-page-footer de components/page-footer.css del catálogo, agrupados por familia. Cada familia enlaza a su página, donde están los valores de todos los modos. En Figma son variables con los mismos nombres; consulta Tokens en Figma.

Color

--luz-divider, --luz-text-secondary

Spacing and sizing

--luz-control-sm, --luz-space-md

Typography

--luz-font-sans, --luz-text-sm

La pestaña Código incluye Teclado y ARIA.