1. Komponenty

Záložky

angl. Tabs

Slouží k rychlé navigaci mezi obsahem ve stejném kontextu.


<div class="tabs__list">
    <ul class="tabs__list-holder">
        <li class="tabs__item">
            <a href="#" class="tabs__link tabs__link--active not-visited">Základní informace</a>
        </li>
        <li class="tabs__item">
            <a href="#" class="tabs__link not-visited">Kontaktní osoby</a>
        </li>
        <li class="tabs__item">
            <a href="#" class="tabs__link not-visited">Působnost v agendách</a>
        </li>
        <li class="tabs__item">
            <a href="#" class="tabs__link not-visited">Zřizované organizace</a>
        </li>
    </ul>
</div>

Použití

Záložky použijte v případě, že potřebujete zobrazit větší množství obsahu na malém místě. Zároveň veškerý obsah neschovávejte do záložek. Takto schovaný obsah může uživatel přehlédnout. Pokud se o obsahu jednotlivých záložek mají dozvědět i vyhledávače, musí mít každá záložka svou vlastní url.

Označení záložek

Každá záložka má své označení, které:

  • jasně popisuje, co je obsahem záložky
  • je stručné (maximálně 1-2 slova)
  • neobsahuje ikony

Počet záložek

Zobrazujte 2-6 záložek. Tento počet je pevně stanoven, aby se udrželo nepoškozené uživatelské rozhraní a snížila se kognitivní zátěž uživatele. Nepoužívejte pro případ pouze jedné záložky.

Pořadí záložek

Záložky s podobným obsahem seskupujte vedle sebe.