1. Komponenty

Odkaz

angl. Link

Slouží především jako navigační prvek.

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 dark smaller">
        Small
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-normal" class="with-icon with-icon--right dark">
        Normal
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-large" class="with-icon with-icon--right dark larger">
        Large
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-small" class="with-icon with-icon--right dark 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 dark disabled">
        Normal
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-large" class="with-icon with-icon--right dark 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 dark 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 dark">
            Normal
            <span class="with-icon__icon pvs-theme-icon-pin"></span>
    </a>
    <a href="#custom-icon-large" class="inverse with-icon with-icon--right dark 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 dark 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 dark 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 dark 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 dark smaller">
    Small
    <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-normal" class="with-icon with-icon--left dark">
    Normal
    <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-large" class="with-icon with-icon--left dark larger">
    Large
    <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-small" class="with-icon with-icon--left dark 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 dark disabled">
    Normal
    <span class="with-icon__icon pvs-theme-icon-pin"></span>
</a>
<a href="#custom-icon-large" class="with-icon with-icon--left dark 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 dark 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 dark">
        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 dark 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 dark 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 dark 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 dark larger disabled">
        Large
        <span class="with-icon__icon pvs-theme-icon-pin"></span>
    </a>
</div>

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.

  • Pro odkaz použijte text, nikoli 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ánily jeho zalamování

Užitečné odkazy