Pie del sitio

Código

Copiar el marcado

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

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

<footer class="luz-site-footer">
  <div class="o-container o-container--inline o-row">
    <p>Acme Inc. · MIT licence</p>
    <nav class="o-actions" aria-label="Links">
      <a class="luz-btn luz-btn--ghost luz-btn--sm" href="/status/">Service status</a>
      <a class="luz-btn luz-btn--ghost luz-btn--sm" href="/accessibility/">Accessibility statement</a>
    </nav>
  </div>
</footer>

<footer class="luz-site-footer">
  <div class="o-container o-container--inline o-grid">
    <div class="luz-site-footer__brand">
      <p><strong>Acme Stock</strong> <span>v2.0</span></p>
      <p>Stock counts that keep up with the shop.</p>
    </div>
    <nav class="luz-site-footer__col" aria-labelledby="footer-product">
      <h2 class="luz-site-footer__col-title" id="footer-product">Product</h2>
      <ul>
        <li><a href="/pricing/">Pricing</a></li>
        <li><a href="/trial/">Start free trial</a></li>
      </ul>
    </nav>
    <nav class="luz-site-footer__col" aria-labelledby="footer-company">
      <h2 class="luz-site-footer__col-title" id="footer-company">Company</h2>
      <ul>
        <li><a href="/about/">About</a></li>
      </ul>
    </nav>
  </div>
</footer>

Variantes y opciones

Sin modificadores. El pie de página es una clase de catalog aplicada a un <footer> nativo, con una fila de core o una cuadrícula para la marca y las columnas.

Cómo funciona

CSS de components/site-footer.css de @luz-ds/catalog sobre los objetos de core. No usa JavaScript.

• El pie de página añade la línea, el espacio alrededor de la fila y la distribución de sus elementos; .o-container--inline alinea la fila con el contenido de la página.
• En un .o-page, el área principal crece, así que el pie de página queda abajo cuando la página es más corta que la ventana.
• Con una marca y columnas, las celdas se apilan; a partir de 768 px se colocan en fila: la marca ocupa dos partes y cada columna, una.
• A 768 px o menos, la columna no se ajusta y sus elementos permanecen uno debajo del otro.

Sin JavaScript

No cambia nada: el pie de página es HTML y CSS. El modo de color que incluya sigue funcionando: con botones de opción si no hay JavaScript.

Teclado y ARIA

El pie de página no tiene interacción propia; sus enlaces mantienen la suya.

• Un <footer> que sea hijo directo de <body> es el punto de referencia de información del contenido.
• Nombra un <nav> de enlaces con aria-label y mantén los enlaces en el mismo orden en todas las páginas.
• Nombra el <nav> de una columna con su título mediante aria-labelledby y convierte el título en un encabezado (<h2>).

Contraste y foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa el pie de página al final de cada página de un sitio de landing, de un blog o de un periódico para indicar quién lo ha creado, su licencia y algunos enlaces secundarios.

Cuándo no usarlo

No pongas en el pie de página la navegación principal ni nada que haga falta para completar una tarea.

• La navegación principal va en la cabecera del sitio.

Buenas y malas prácticas

Redacción del contenido

Sé breve: indica quién lo ha creado, la licencia y entre dos y cuatro enlaces.

• Cada enlace indica adónde lleva: «Declaración de accesibilidad», no «Legal».
• La marca incluye el nombre, una versión si la gente necesita saber cuál es y una línea sobre qué es. El título de cada columna es una palabra: «Producto», «Empresa», «Legal».

Contraste y foco

El pie de página añade una línea superior (--luz-divider) decorativa y el título de cada columna usa el color de texto principal; los demás textos y enlaces conservan sus colores. El fondo de la tabla es la página.

Calculado a partir de los valores de los tokens de cada modo, redondeado hacia abajo. El mínimo es el de WCAG 2.2 AA: 4,5:1 para el texto.

• Foco: los enlaces y botones conservan su propio anillo.
• Colores forzados: la línea es un borde, así que se mantiene.

Tokens que utiliza

Los 9 tokens que leen, por familia, las reglas de .luz-site-footer en components/site-footer.css. 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-primary

Spacing and sizing

--luz-control-sm, --luz-space-lg, --luz-space-md, --luz-space-xl, --luz-space-xs

Typography

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

Teclado y ARIA están en la pestaña Código.