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>

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í

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.