Footer

# Footer (Pattern)

El footer es un patrón estructural de nivel de página que cierra la interfaz. Agrupa de forma organizada enlaces legales, información de contacto y logotipos institucionales obligatorios.

Por qué es un Pattern

A diferencia de un componente atómico puro (como un botón), el footer es una composición macro (un *pattern*) porque establece reglas de layout y agrupamiento (Flexbox / Grid) para organizar otros elementos más pequeños (enlaces, textos, imágenes). Actúa como la plantilla base que garantiza una distribución responsive idéntica en cualquier proyecto del sistema, independientemente de los enlaces concretos o textos de ayuda inyectados.

Cuándo usar

- En la parte inferior de todas las páginas principales de la aplicación o portal web.

Tipos de bloques soportados

El patrón ha sido diseñado para admitir opcionalmente las siguientes piezas, organizadas en filas lógicas: 1. Atención y Asistencia: Dos bloques de texto con enlaces rápidos para números de teléfono y direcciones de correo electrónico. 2. Línea divisoria: Un separador visual para separar el contenido de los elementos legales. 3. Enlaces legales: Una lista semántica (<ul>) con navegación legal y corporativa. 4. Logotipos institucionales: Espacio dedicado para el escudo autonómico y los sellos de cofinanciación, repartidos a los lados de la caja inferior. 5. Barra de marca: Una línea decorativa inferior de color corporativo primario.

Comportamiento Responsive

El patrón cambia de forma fluida y sin requerir código JavaScript: - Mobile-first: Por defecto, todos los bloques se apilan verticalmente en una sola columna. El flujo de lectura natural acompaña el *scroll*. - Desktop (min-width: 768px): La estructura se reagrupa. Los bloques de ayuda pasan a 2 columnas. Los enlaces legales se disponen horizontalmente. La sección inferior reparte los logotipos en los extremos opuestos usando justificación flexible (space-between).

Variantes

1. Estándar (.footer): La distribución oficial predeterminada explicada arriba. 2. Centrado (.footer--centered): Modificador para centrar horizontalmente y apilar todos los elementos. Muy útil en contextos muy estrechos o páginas independientes (ej. pantallas de login o error). 3. Compacto (.footer--compact): Los bloques de ayuda superior se acoplan en línea horizontal (ej. Atención: [Teléfono]) para reducir drásticamente el alto del componente.

Accesibilidad (HTML/CSS)

- Semánticamente, el contenedor base utiliza la etiqueta nativa <footer>. - Para una correcta exploración con lectores de pantalla, los enlaces legales utilizan estructura de lista <ul> / <li>. - Se ha aplicado un foco visible fuerte (:focus-visible) que hereda el anillo azul estándar en todos los enlaces de texto. - Logos: No se construyen componentes atómicos innecesarios para los logos. Se emplean elementos nativos <img>. Todo logotipo debe proveer un atributo alt preciso (ej. alt="Logotipo del Gobierno de Navarra" o alt="Cofinanciado por la Unión Europea"). No usar alt vacíos a menos que el nombre del organismo ya esté presente en texto inmediatamente al lado.

<footer class="footer">
  <div class="footer__container">
    <div class="footer__grid">
      <div class="footer__block">
        <h2 class="footer__title">Atención y ayuda</h2>
        <p class="footer__text">Si necesitas ayuda para</p>
        <div class="footer__contact-group">
          <a href="tel:+34948012012" class="footer__link">+34 948 012 012</a>
          <a href="mailto:info@navarra.es" class="footer__link">info@navarra.es</a>
        </div>
      </div>
      <div class="footer__block">
        <h2 class="footer__title">Asistencia técnica</h2>
        <p class="footer__text">Si tiene problemas con el uso de la aplicación contacta con nosotros en</p>
        <div class="footer__contact-group">
          <a href="tel:+34948012012" class="footer__link">+34 948 012 012</a>
          <a href="mailto:info@navarra.es" class="footer__link">info@navarra.es</a>
        </div>
      </div>
    </div>
    <hr class="footer__divider" />
    <ul class="footer__legal">
      <li class="footer__legal-item"><a href="#" class="footer__legal-link">Accesibilidad</a></li>
      <li class="footer__legal-item"><a href="#" class="footer__legal-link">Aviso legal</a></li>
      <li class="footer__legal-item"><a href="#" class="footer__legal-link">Protección de datos</a></li>
    </ul>
    <div class="footer__bottom">
      <div class="footer__logos">
        <img src="/assets/images/logo-gobierno-navarra.svg" alt="Logotipo del Gobierno de Navarra" class="footer__logo">
      </div>
      <div class="footer__logos footer__logos--secondary">
        <img src="/assets/images/logo-ue.svg" alt="Cofinanciado por la Unión Europea" class="footer__logo">
      </div>
    </div>
  </div>
  <div class="footer__bar"></div>
</footer>