Linki(ang. Links)

Linki stanowią jedną z podstawowych form nawigacji. Pozwalają na przechodzenie pomiędzy różnymi stronami lub sekcjami. Mogą również służyć do inicjowania akcji o mniejszym priorytecie niż w przypadku przycisków, np. pobrania lub załadowania załącznika czy wyczyszczenia filtrów.

Linki mogą występować w formie:

– Linków tekstowych
– Linków z ikoną
– Listy linków

Link tekstowy

Link tekstowy to najprostszy rodzaj linku występujący w bloku tekstu. Takie linki oznaczone są czerwonym kolorem i podkreśleniem. W przypadku tekstu umieszczonego na ciemnym tle link występuje w kolorze białym z podkreśleniem.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et deleniti aut nulla temporibus deserunt architecto tenetur voluptatum explicabo doloribus sint, ad pariatur sit quae, a nisi porro magni. 


<p>
  Lorem, ipsum dolor sit amet <a href="#">consectetur adipisicing</a> elit. Et deleniti aut
  nulla temporibus deserunt architecto tenetur voluptatum explicabo doloribus
  sint, ad pariatur sit quae, a nisi porro magni.
</p>

Link z ikoną

Ten rodzaj linków służy do nawigacji i wywoływania mniej priorytetowych akcji. Do akcji o wyższym priorytecie mają służyć przyciski.


<button class="link-button link-button--left-icon">
  <i aria-hidden="true" class="mdi icon mdi-arrow-left"></i>
  <span class="button__label">Link</span>
</button>

<button class="link-button link-button--right-icon">
  <span class="button__label">Link</span>
  <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
</button>

<button class="link-button--animated-left">
  <i aria-hidden="true" class="mdi icon mdi-arrow-left"></i>
  <span class="button__label">Animated</span>
</button>

<button class="link-button--animated-right">
  <span class="button__label">Animated</span>
  <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
</button>

<button class="link-button link-button--right-icon link-button--orlen-red">
  <span class="button__label">Link</span>
  <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
</button>

<button disabled class="link-button link-button--right-icon">
  <span class="button__label">Disabled</span>
  <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
</button>

  1. Etykieta

    Powinna być krótka i jasno wskazywać na wywoływaną akcję (zalecane są czasowniki). W przypadku linków nawigacyjnych powinna jasno wskazywać miejsce, do którego link odsyła.

  2. Ikona

    Ikona może występować po lewej lub po prawej stronie etykiety. Musi mieć ten sam kolor co etykieta. Najczęściej stosowaną ikoną jest strzałka.

Cały przycisk jest klikalny.

Warianty

  1. Link z ikoną po lewej stronie
  2. Link z ikoną po prawej stronie

<button class="link-button link-button--left-icon">
  <i aria-hidden="true" class="mdi icon mdi-arrow-left"></i>
  <span class="button__label">Link</span>
</button>

<button class="link-button link-button--right-icon">
  <span class="button__label">Link</span>
  <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
</button>

<button class="link-button--animated-left">
  <i aria-hidden="true" class="mdi icon mdi-arrow-left"></i>
  <span class="button__label">Animated</span>
</button>

<button class="link-button--animated-right">
  <span class="button__label">Animated</span>
  <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
</button>

<button class="link-button link-button--right-icon link-button--orlen-red">
  <span class="button__label">Link</span>
  <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
</button>

<button disabled class="link-button link-button--right-icon">
  <span class="button__label">Disabled</span>
  <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
</button>

Na jasnym tle każdy z powyższych wariantów może wystąpić w jednej z dwóch opcji kolorystycznych:

  1. Szarej (podstawowej)

    Wariant wykorzystywany m.in. w menu.

  2. Czerwonej

    Wariant wykorzystywany głównie do linków znajdujących się w środku tekstu lub odsyłających do stron www czy wskazujących adres e-mail.

Grupy

Linki z ikoną mogą tworzyć grupę. Wszystkie linki w grupie powinny mieć ikony umieszczone z tej samej strony. Jeśli linki mają różne rozmieszczenie ikon, należy je rozdzielić (nawet jeśli oznacza to oddzielenie pojedynczego linku od grupy). Tak utworzone grupy powinna oddzielać większa przestrzeń niż linki w obrębie jednej grupy.

Linki tworzące grupę mogą być rozmieszczone poziomo. Ponadto linki tworzące grupę powinny mieć ten sam kolor.


<div class="buttons-group buttons-group--link-buttons alignment--center">
  <button class="link-button link-button--left-icon">
    <i aria-hidden="true" class="mdi icon mdi-cellphone"></i>
    <span class="button__label">Kontakt</span>
  </button>

  <button class="link-button link-button--left-icon">
    <i aria-hidden="true" class="mdi icon mdi-format-list-bulleted-square"></i>
    <span class="button__label">Grupa ORLEN</span>
  </button>

  <button class="link-button link-button--left-icon">
    <i aria-hidden="true" class="mdi icon mdi-earth"></i>
    <span class="button__label">Polska/Polski</span>
  </button>
</div>

Lista linków

Lista linków składa się z grupy graficznie wyróżnionych linków i służy pomocniczo do nawigacji pomiędzy stronami lub podstronami. Stosowana jest w sytuacjach, w których linki powinny mocniej przykuwać uwagę użytkownika niż ma to miejsce w przypadku linków podstawowych.


<div class="grid">
  <div class="grid__col m-col--12 t-col--6 d-col--6">
    <ul class="link-list">
      <li class="link-list__item">
        <a href="#" class="link-item">
          <h3 class="link-item-text headline-3">Link</h3>
          <div class="link__arrow-container">
            <i
              aria-hidden="true"
              class="select__icon mdi icon icon--small mdi-arrow-right"
            ></i>
          </div>
        </a>
      </li>
      <li class="link-list__item">
        <a href="#" class="link-item">
          <h3 class="link-item-text headline-3">Link</h3>
          <div class="link__arrow-container">
            <i
              aria-hidden="true"
              class="select__icon mdi icon icon--small mdi-arrow-right"
            ></i>
          </div>
        </a>
      </li>
      <li class="link-list__item">
        <a href="#" class="link-item">
          <h3 class="link-item-text headline-3">Link</h3>
          <div class="link__arrow-container">
            <i
              aria-hidden="true"
              class="select__icon mdi icon icon--small mdi-arrow-right"
            ></i>
          </div>
        </a>
      </li>
    </ul>
  </div>
  <div class="grid__col m-col--12 t-col--6 d-col--6">
    <ul class="link-list">
      <li class="link-list__item">
        <a href="#" class="link-item">
          <h3 class="link-item-text headline-3">Link</h3>
          <div class="link__arrow-container">
            <i
              aria-hidden="true"
              class="select__icon mdi icon icon--small mdi-launch"
            ></i>
          </div>
        </a>
      </li>
      <li class="link-list__item">
        <a href="#" class="link-item">
          <h3 class="link-item-text headline-3">Link</h3>
          <div class="link__arrow-container">
            <i
              aria-hidden="true"
              class="select__icon mdi icon icon--small mdi-launch"
            ></i>
          </div>
        </a>
      </li>
      <li class="link-list__item">
        <a href="#" class="link-item">
          <h3 class="link-item-text headline-3">Link</h3>
          <div class="link__arrow-container">
            <i
              aria-hidden="true"
              class="select__icon mdi icon icon--small mdi-launch"
            ></i>
          </div>
        </a>
      </li>
    </ul>
  </div>
</div>

  1. Etykieta

    Powinna być krótka i jasno wskazywać na stronę, która zostanie otwarta lub na którą zostanie przeniesiony użytkownik. Rekomendowany limit tekstu to 1 linijka na wszystkich rozdzielczościach.

  2. Strzałka

    W przypadku linków kierujących na zewnętrzną domenę zalecane jest zastosowanie odpowiedniej ikony przedstawiającej strzałkę wychodzącą poza ramkę.

  3. Separator

    Oddziela linki oraz cały komponent od innych komponentów.

Cały wiersz zawierający etykietę i strzałkę jest klikalny.

Zasady stosowania

lorem ipsum

Krótkie i jednoznaczne etykiety

W miarę możliwości należy stosować krótkie, zwięzłe, ale jednoznaczne etykiety, które jasno określają miejsce, do którego zostanie przeniesiony użytkownik lub stronę, która zostanie otwarta.

lorem ipsum

Odpowiedni kontrast

Ważne jest zachowanie odpowiedniego kontrastu link-tło (dla poziomu dostępności AA to minimum 4.5:1).

lorem ipsum

Grupa linków o tym samym kolorze

lorem ipsum

Grupa linków z ikoną po tej samej stronie

lorem ipsum

Linki ułożone poziomo

Jeśli linki tworzące grupę rozmieszczone są poziomo, należy najważniejsze linki umieścić jak najbardziej na lewo.

lorem ipsum

Linki w tekście bez ikony

Link umieszczony w tekście nie powinien zawierać ikony. Wyjątkiem jest ikona linku zewnętrznego, która znajduje się zazwyczaj po jego lewej stronie.

lorem ipsum

Link rozwijający dodatkowe elementy

Jeśli kliknięcie w link powoduje rozwinięcie listy elementów, należy po jego prawej stronie umieścić strzałkę.

lorem ipsum

Grupa linków z różnymi rozmieszczeniem ikon

Jeśli linki mają różne rozmieszczenie ikon, należy je podzielić na osobne grupy i odseparować większą przestrzenią niż linki w obrębie jednej grupy.

lorem ipsum

Grupa linków o różnym kolorze

lorem ipsum

Zbędne ikony

Nie należy stosować ikon, jeśli nie wprowadzają one dodatkowej wartości.