Webové komponenty

Informačná lišta / Lišta s varovaním

Lištu použite vtedy, keď chcete niečo zdôrazniť alebo na niečo upozorniť.
K dispozícii sú dva typy lišty.

Obsah:

Obsah lišty musí byť výstižný. Optimálne odporúčame použiť rozsah textu na 1 riadok, max. však 3 riadky. Čím viac textu použijete, tým je pravdepodobnejšie, že štítok nesplní účel. Platí zásada, že krátky a výstižný text si používateľ prečíta skôr ako dlhý text (3 riadky).

Obsah v štítku môžete zvýrazniť aj tučným rezom písma. Ak to charakter textu umožňuje, pridajte do lišty aj odkaz alebo link (napr. na vyhlášku alebo stránku), kde používateľ nájde obsah, na ktorý ho upozorňujete. Výrazne tak používateľovi uľahčíte vyhľadávanie.

Šedý štítok (info štítok)

Šedú lištu (informačná lišta) použite, keď chcete niečo zdôrazniť (napr.: nový obsah na stránke, nové znenie vyhlášky, novú stratégiu a podobne).

Repozitár pre novú verziu ID-SK Frontend nájdete na github-e.

<div class="idsk-warning-text idsk-warning-text--info">
  <div class="govuk-width-container">
    <div class="idsk-warning-text__text">
      Repozitár pre novú verziu ID-SK Frontend nájdete na <a class='govuk-link' href='https://github.com/id-sk/id-sk-frontend/' title='github ID-SK' target='_blank'>github-e</a>.
    </div>
  </div>
</div>

Žltý štítok (varovací štítok)

Žltú lištu (varovacia lišta) použite, keď budete chcieť zdôrazniť alebo upriamiť pozornosť na obsah, ktorý považujete za veľmi dôležitý pre používateľa (napr.: povinnosti - "...do konca marca sa musíte zaregistrovať!", upozornenie - "do platnosti vstupuje nová vyhláška!").

Upozornenie - Ak prichádzate z rizikovej krajiny, musíte vyplniť formulár.

<div class="idsk-warning-text">
  <div class="govuk-width-container">
    <div class="idsk-warning-text__text">
      Upozornenie - Ak prichádzate z rizikovej krajiny, musíte vyplniť <a class="govuk-link" href='#' title='formulár'>formulár</a>.
    </div>
  </div>
</div>