DIANA

Diseño Aplicaciones Navarra

Footer

Pattern de pie de página con enlaces legales, logos institucionales y variantes de layout estándar y fullwidth.

Estado: review

1. Footer boxed (con ayuda y asistencia)

Mostrar HTML 
<footer role="contentinfo" class="gn-footer gn-footer--boxed" aria-label="Pie de página">
        <div class="gn-footer__container">
          <div class="gn-footer__main">
            <section class="gn-footer__section" aria-labelledby="footer-help-title-boxed">
              <h5 class="gn-footer__title" id="footer-help-title-boxed">Atención y ayuda</h5>
              <p class="gn-footer__text">Si necesitas ayuda, puedes contactar con nosotros en:</p>
              <div class="gn-footer__contacts">
                <a href="tel:+34948012012" class="gn-footer__link">+34 948 012 012</a>
                <a href="mailto:info@navarra.es" class="gn-footer__link">info@navarra.es</a>
              </div>
            </section>

            <section class="gn-footer__section" aria-labelledby="footer-tech-title-boxed">
              <h5 class="gn-footer__title" id="footer-tech-title-boxed">Asistencia técnica</h5>
              <p class="gn-footer__text">Si tienes problemas con el uso de la aplicación, contacta con:</p>
              <div class="gn-footer__contacts">
                <a href="tel:+34948012012" class="gn-footer__link">+34 948 012 012</a>
                <a href="mailto:soporte@navarra.es" class="gn-footer__link">soporte@navarra.es</a>
              </div>
            </section>
          </div>

          <hr class="gn-footer__divider gn-footer__divider--support" />

          <nav aria-label="Información legal">
            <ul class="gn-footer__legal">
              <li><a href="#" class="gn-footer__legal-link">Accesibilidad</a></li>
              <li><a href="#" class="gn-footer__legal-link">Aviso legal</a></li>
              <li><a href="#" class="gn-footer__legal-link">Protección de datos</a></li>
            </ul>
          </nav>

          <hr class="gn-footer__divider" />

          <div class="gn-footer__bottom">
            <div class="gn-footer__brand">
              <picture class="gn-footer__logo-picture gn-footer__logo-picture--gov">
                <source media="(max-width: 767.98px)" srcset="../assets/public/logos/NG-logo-center.svg" />
                <img src="../assets/public/logos/NG-logo.svg" alt="Gobierno de Navarra" class="gn-footer__logo gn-footer__logo--gov" />
              </picture>
            </div>
            <div class="gn-footer__partners">
              <img src="../assets/public/logos/confinanciado-eu.svg" alt="Cofinanciado por la Unión Europea" class="gn-footer__logo gn-footer__logo--eu" />
            </div>
          </div>
        </div>
        <div class="gn-footer__bar" aria-hidden="true"></div>
      </footer>

2. Footer boxed (sin ayuda ni asistencia)

Mostrar HTML 
<footer role="contentinfo" class="gn-footer gn-footer--boxed gn-footer--without-support" aria-label="Pie de página">
        <div class="gn-footer__container">
          <div class="gn-footer__main" aria-hidden="true"></div>

          <hr class="gn-footer__divider gn-footer__divider--support" />

          <nav aria-label="Información legal">
            <ul class="gn-footer__legal">
              <li><a href="#" class="gn-footer__legal-link">Accesibilidad</a></li>
              <li><a href="#" class="gn-footer__legal-link">Aviso legal</a></li>
              <li><a href="#" class="gn-footer__legal-link">Protección de datos</a></li>
            </ul>
          </nav>

          <hr class="gn-footer__divider" />

          <div class="gn-footer__bottom">
            <div class="gn-footer__brand">
              <picture class="gn-footer__logo-picture gn-footer__logo-picture--gov">
                <source media="(max-width: 767.98px)" srcset="../assets/public/logos/NG-logo-center.svg" />
                <img src="../assets/public/logos/NG-logo.svg" alt="Gobierno de Navarra" class="gn-footer__logo gn-footer__logo--gov" />
              </picture>
            </div>
            <div class="gn-footer__partners">
              <img src="../assets/public/logos/confinanciado-eu.svg" alt="Cofinanciado por la Unión Europea" class="gn-footer__logo gn-footer__logo--eu" />
            </div>
          </div>
        </div>
        <div class="gn-footer__bar" aria-hidden="true"></div>
      </footer>