<div class="tabs__list">
<ul class="tabs__list-holder">
<li class="tabs__item">
<a href="#zi" class="tabs__link tabs__link--active not-visited">Základní informace</a>
</li>
<li class="tabs__item">
<a href="#ko" class="tabs__link not-visited">Kontaktní osoby</a>
</li>
<li class="tabs__item">
<a href="#pva" class="tabs__link not-visited">Působnost v agendách</a>
</li>
<li class="tabs__item">
<a href="#zo" class="tabs__link not-visited">Zřizované organizace</a>
</li>
</ul>
</div>
<div class="guide guide--tab guide--visible" id="zi">
<p>Základní informace ... obsah ...</p>
</div>
<div class="guide guide--tab" id="ko">
<p>Kontaktní osoby ... obsah ...</p>
</div>
<div class="guide guide--tab" id="pva">
<p>Působnost v agendách ... obsah ...</p>
</div>
<div class="guide guide--tab" id="zo">
<p>Zřizované organizace ... obsah ...</p>
</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í.
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.
