1. Komponenty

Odkaz

angl. Link

Slouží především jako navigační prvek. Po kliknutí odkazuje uživatele podle typu odkazu z jedné webové stránky na jinou nebo na stejnou stránku, ale jinou sekci.

Ukázka standardních odkazů



<a href="#overview-small" class="smaller">Small</a>
<a href="#overview-normal">Normal</a>
<a href="#overview-large" class="larger">Large</a>
<a href="#overview-small" class="smaller disabled">Small</a>
<a href="#overview-normal" class="disabled">Normal</a>
<a href="#overview-large" class="larger disabled">Large</a>

<div class="mp-background--blue">
    <a href="#inverse-text-small" class="inverse smaller">Small</a>
    <a href="#inverse-text-normal" class="inverse">Normal</a>
    <a href="#inverse-text-large" class="inverse larger">Large</a>
    <a href="#inverse-text-disabled-small" class="inverse disabled smaller">Small</a>
    <a href="#inverse-text-disabled-normal" class="inverse disabled">Normal</a>
    <a href="#inverse-text-disabled-large" class="inverse disabled larger">Large</a>
</div>

Ukázka externích odkazů



<a href="#overview-small" class="external smaller">Small</a>
<a href="#overview-normal" class="external" >Normal</a>
<a href="#overview-large" class="external larger">Large</a>
<a href="#overview-small" class="external smaller disabled">Small</a>
<a href="#overview-normal" class="external disabled">Normal</a>
<a href="#overview-large" class="external larger disabled">Large</a>

<div class="mp-background--blue">
    <a href="#inverse-text-small" class="external inverse smaller">Small</a>
    <a href="#inverse-text-normal" class="external inverse">Normal</a>
    <a href="#inverse-text-large" class="external inverse larger">Large</a>
    <a href="#inverse-text-disabled-small" class="external inverse disabled smaller">Small</a>
    <a href="#inverse-text-disabled-normal" class="external inverse disabled">Normal</a>
    <a href="#inverse-text-disabled-large" class="external inverse disabled larger">Large</a>
</div>

Ukázka samostatně stojících odkazů



<a href="#overview-small" class="overview smaller">Small</a>
<a href="#overview-normal" class="overview">Normal</a>
<a href="#overview-large" class="overview larger">Large</a>
<a href="#overview-small" class="overview smaller disabled">Small</a>
<a href="#overview-normal" class="overview disabled">Normal</a>
<a href="#overview-large" class="overview larger disabled">Large</a>

<div class="mp-background--blue">
    <a href="#inverse-text-small" class="overview inverse smaller">Small</a>
    <a href="#inverse-text-normal" class="overview inverse">Normal</a>
    <a href="#inverse-text-large" class="overview inverse larger">Large</a>
    <a href="#inverse-text-disabled-small" class="overview inverse disabled smaller">Small</a>
    <a href="#inverse-text-disabled-normal" class="overview inverse disabled">Normal</a>
    <a href="#inverse-text-disabled-large" class="overview inverse disabled larger">Large</a>
</div>

Ukázka odkazů s ikonami za textem



<a href="#custom-icon-small" class="with-icon with-icon--right smaller">
        Small
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-normal" class="with-icon with-icon--right">
        Normal
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-large" class="with-icon with-icon--right larger">
        Large
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-small" class="with-icon with-icon--right smaller disabled">
        Small
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-normal" class="with-icon with-icon--right disabled">
        Normal
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-large" class="with-icon with-icon--right larger disabled">
        Large
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>

<div class="mp-background--blue">
    <a href="#custom-icon-small" class="inverse with-icon with-icon--right smaller">
            Small
            <span class="with-icon__icon pvs-theme-icon-pin"></span>
    </a>
    <a href="#custom-icon-normal" class="inverse with-icon with-icon--right">
            Normal
            <span class="with-icon__icon pvs-theme-icon-pin"></span>
    </a>
    <a href="#custom-icon-large" class="inverse with-icon with-icon--right larger">
            Large
            <span class="with-icon__icon pvs-theme-icon-pin"></span>
    </a>
    <a href="#custom-icon-small" class="inverse with-icon with-icon--right smaller disabled">
            Small
            <span class="with-icon__icon pvs-theme-icon-pin"></span>
    </a>
    <a href="#custom-icon-normal" class="inverse with-icon with-icon--right disabled">
            Normal
            <span class="with-icon__icon pvs-theme-icon-pin"></span>
    </a>
    <a href="#custom-icon-large" class="inverse with-icon with-icon--right larger disabled">
            Large
            <span class="with-icon__icon pvs-theme-icon-pin"></span>
    </a>
</div>

Ukázka odkazů s ikonami před textem



<a href="#custom-icon-small" class="with-icon with-icon--left smaller">
    Small
    <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-normal" class="with-icon with-icon--left">
    Normal
    <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-large" class="with-icon with-icon--left larger">
    Large
    <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-small" class="with-icon with-icon--left smaller disabled">
    Small
    <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-normal" class="with-icon with-icon--left disabled">
    Normal
    <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-large" class="with-icon with-icon--left larger disabled">
    Large
    <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>


<div class="mp-background--blue">
    <a href="#inverse-custom-icon-small" class="inverse with-icon with-icon--left smaller">
        Small
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
    </a>
    <a href="#inverse-custom-icon-normal" class="inverse with-icon with-icon--left">
        Normal
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
    </a>
    <a href="#inverse-custom-icon-large" class="inverse with-icon with-icon--left larger">
        Large
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
    </a>
    <a href="#inverse-custom-icon-small" class="inverse with-icon with-icon--left smaller disabled">
        Small
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
    </a>
    <a href="#inverse-custom-icon-normal" class="inverse with-icon with-icon--left disabled">
        Normal
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
    </a>
    <a href="#inverse-custom-icon-large" class="inverse with-icon with-icon--left larger disabled">
        Large
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
    </a>
</div>

Responzivní (RWD) zobrazení

Slouží pro zobrazení na menších zařízeních (mobilech, tabletech).

Pro představu, jak se má komponenta chovat na jiném zařízení, lze náhled komponenty zmenšit podle potřeby. Ke zmenšení dojde stisknutím pravého okraje a potáhnutím doleva. Komponenta se automaticky přeskládá podle míry zmenšení.

Více o typech zařízení najdete na stránce Mřížka.

Použití

Odkaz používejte především jako navigační prvek. Pomocí odkazu můžete také měnit, jak data uživatel zobrazí (zobrazit více, zobrazit vše). Pokud akce provedené uživatelem mají měnit data nebo s nimi manipulovat, použijte Tlačítko.

Typy odkazů

Podle typu přesměrování

Podle webové stránky, kam je uživatel přesměrován, se odkazy rozdělují na interní a externí.

Interní odkazy

Interní odkazy přesměrují uživatele na jinou stránku, ovšem stále v rámci daného webu (stejné domény - např. jiná stránka v rámci domény Portálu veřejné správy). Zpět se uživatel vrátí použitím tlačítka zpět na webové stránce nebo použitím šipky zpět v prohlížeči.

Externí odkazy

Externí odkazy přesměrují uživatele na stránky mimo daný web, na kterém se právě nachází. Pro externí odkazy je dobré použít jako součást odkazu ikonu pro externí odkaz (viz ukázka externích odkazů výše). Ta uživateli pomůže s pochopením, že bude odkazován na externí stránku. Po kliknutí na externí odkaz by měla uživateli vyskočit nová karta v prohlížeči, kde se načte příslušná externí stránka. Na jedné kartě tedy bude mít uživatel původní stránky, na další kartě pak externí stránky, na které směroval odkaz. Zpět se uživatel vrátí překliknutím karty v prohlížeči nebo zavřením nové karty s externí stránkou.

Podle konkrétnosti přesměrování

Odkazy mohou být jak generické, tak přímé (týká se primárně externích odkazů).

Generické odkazy

Generický odkaz je odkaz, který uživatele odnaviguje pouze na obecnou stránku (domovská stránka webu) nebo sekci. Uživatel se pak musí sám zorientovat a proklikat se na požadovanou stránku.

Přímé odkazy

Přímý odkaz (angl. deep linking) oproti tomu uživatele naviguje přímo na konkrétní sekci, například formulář. Pokud je to možné, volíme odkazy přímé, které uživateli usnadní hledání informací.

Doporučení

  • Pro odkaz použijte text, nikoli pouze grafiku nebo ikony
  • Odkaz by měl obsahovat maximálně tři slova
  • Text v odkazu by měl být v souladu se zamýšleným cílem, tzn. vyhněte se nic neříkajícím odkazům typu “klikněte zde”, “najdete zde” atp. nebo vypisování konkrétní webové adresy (url) - použijte raději smysluplný popis a odpovídající název cílového webu
  • U odkazu s několika slovy se držte pravidla, aby byl odkaz dostatečně dlouhý na to, aby byl srozumitelný uživateli, ale současně byl dostatečně krátký, abyste zabránili jeho zalamování
  • Odkazy v textu jsou vždy podtržené.

Užitečné odkazy