Stopka(ang. Footer)

Stopka zamyka stronę. Jest taka sama dla strony głównej, jak i wszystkich podstron. Zawiera podstawowe informacje prawne oraz linki do najważniejszych podstron lub stron zewnętrznych.

Struktura

  1. Nagłówek sekcji opcjonalny

    Nagłówki pomagają w grupowaniu informacji zawartych w stopce. Rekomendowany limit długości nagłówka to 1 linijka na wszystkich rozdzielczościach.

  2. Informacje prawne

    Są to przede wszystkim informacje o prawach autorskich.

  3. Linki

    Stopka powinna zawierać linki do najważniejszych podstron serwisu lub ważne linki zewnętrzne. Rekomendowany limit długości linku to 1 linijka na wszystkich rozdzielczościach.

  4. Przyciski-ikony opcjonalny

    Często stosowanym elementem stopki są linki do mediów społecznościowych.

Jedynie linki i przyciski są elementami klikalnymi stopki.

Dodatkowo stopka może zawierać inne komponenty, np. przyciski odsyłające do sklepów z aplikacjami czy krótki formularz zapisu do newslettera.


<footer class="footer">
  <div class="grid footer__grid">
    <div class="grid__col m-col--12 t-col--12 d-col--4">
      <h3 class="footer__heading body-text text--semibold">PKN Orlen</h3>
      <p class="footer__element body-text">Copyright © 1996-2021</p>
      <p class="footer__element body-text">Wszystkie prawa zastrzeżone</p>
    </div>

    <div class="grid__col m-col--12 t-col--8 d-col--6 mobile-hidden">
      <h3 class="footer__heading body-text text--semibold">Na skróty</h3>
      <div class="grid">
        <div class="grid__col m-col--12 t-col--6 d-col--4">
          <a href="#" class="footer__link body-text link-text"
            >Hurtowe ceny paliw</a
          >
          <a href="#" class="footer__link body-text link-text">Znajdź stacje</a>
          <a href="#" class="footer__link body-text link-text">Nasze marki</a>
        </div>
        <div class="grid__col m-col--12 t-col--6 d-col--4">
          <a href="#" class="footer__link body-text link-text"
            >Przetargi i Dostawy</a
          >
          <a href="#" class="footer__link body-text link-text"
            >Obsługa klienta</a
          >
          <a href="#" class="footer__link body-text link-text">VITAY</a>
        </div>
        <div class="grid__col m-col--12 t-col--6 d-col--4">
          <a href="#" class="footer__link body-text link-text">Dla kierowców</a>
          <a href="#" class="footer__link body-text link-text"
            >Dla przedsiębiorstw</a
          >
          <a href="#" class="footer__link body-text link-text"
            >Dla inwestorów</a
          >
        </div>
      </div>
    </div>

    <div class="grid__col m-col--12 t-col--4 d-col--2 mobile-hidden">
      <h3 class="footer__heading body-text text--semibold">O firmie</h3>
      <a href="#" class="footer__link body-text link-text">O nas</a>
      <a href="#" class="footer__link body-text link-text">Biuro prasowe</a>
      <a href="#" class="footer__link body-text link-text">Kontakt</a>
    </div>

    <div class="grid__col m-col--12 t-col--12 d-col--12">
      <section class="icons__container">
        <button aria-label="lorem ipsum" class="icon-button">
          <i aria-hidden="true" class="mdi icon mdi-facebook"></i>
        </button>
        <button aria-label="lorem ipsum" class="icon-button">
          <i aria-hidden="true" class="mdi icon mdi-linkedin-box"></i>
        </button>
        <button aria-label="lorem ipsum" class="icon-button">
          <i aria-hidden="true" class="mdi icon mdi-twitter"></i>
        </button>
        <button aria-label="lorem ipsum" class="icon-button">
          <i aria-hidden="true" class="mdi icon mdi-youtube"></i>
        </button>
      </section>
    </div>

    <div class="grid__col m-col--12 t-col--6 d-col--7">
      <a href="#" class="footer__link--bottom body-text link-text"
        >Mapa serwisu</a
      >
      <a href="#" class="footer__link--bottom body-text link-text"
        >Polityka prywatności</a
      >
      <a href="#" class="footer__link--bottom body-text link-text"
        >Zastrzerzenia prawne</a
      >
      <a href="#" class="footer__link--bottom body-text link-text"
        >Dane osobowe</a
      >
    </div>
  </div>
</footer>

Zasady stosowania

Stopka zawierająca ważne linki wewnętrzne

W stopce należy umieszczać przede wszystkim linki do kluczowych podstron.

Stopka zawierająca najważniejsze linki zewnętrzne

Możliwe jest także umieszczanie linków zewnętrznych, np. do mediów społecznościowych czy do strony korporacyjnej partnerskiej firmy.

lorem ipsum

Zbyt długie linki

Linki nie powinny być dłuższe niż 1 linijka tekstu na wszystkich rozdzielczościach.

lorem ipsum

Chaotyczna stopka

Zawartość stopki nie może pozostać nieuporządkowana.

lorem ipsum

Przeładowana stopka

Stopka nie powinna być przeładowana.