1. Komponenty

Rozcestník

angl. Guide

Slouží k rychlému náhledu informací v rámci přehledového zobrazení.

Ukázka rozcestníku na hlavní stránce Portálu veřejné správy


<div class="guide guide--hp mt-2 mb-3">
        <div class="guide__inner">
            <div class="row">
                <div class="col-12 col-lg-3">
                    <div>
                        <h2 class="guide__title"><strong>Průvodce</strong> životními situacemi</h2>
                    </div>
                </div>
                <div class="col-12 col-lg-9">
                    <div class="row boxes boxes--light boxes--eq">
                        <div class="col-12 col-sm-6 col-lg-4 box">
                            <div class="box__inner">
                                <h3 class="box__title" style="height: 78px;"><a href="#" class="inverse">Odchod do&nbsp;starobního důchodu</a></h3>
                                <a href="#" class="btn btn-inverse btn--raw btn--more box__more">Rodina</a>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4 box">
                            <div class="box__inner">
                                <h3 class="box__title" style="height: 78px;"><a href="#" class="inverse">Invalidita a&nbsp;žádost o&nbsp;invalidní důchod</a></h3>
                                <a href="#" class="btn btn-inverse btn--raw btn--more box__more">Sociální zabezpečení</a>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4 box">
                            <div class="box__inner">
                                <h3 class="box__title" style="height: 78px;"><a href="#" class="inverse">Rodičovský příspěvek</a></h3>
                                <a href="#" class="btn btn-inverse btn--raw btn--more box__more">Rodina</a>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4 box">
                            <div class="box__inner">
                                <h3 class="box__title" style="height: 78px;"><a href="#" class="inverse">Peněžitá pomoc v&nbsp;mateřství</a></h3>
                                <a href="#" class="btn btn-inverse btn--raw btn--more box__more">Rodina</a>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4 box">
                            <div class="box__inner">
                                <h3 class="box__title" style="height: 78px;"><a href="#" class="inverse">Nemocenské - dočasná pracovní neschopnost zaměstnance</a></h3>
                                <a href="#" class="btn btn-inverse btn--raw btn--more box__more">Sociální zabezpečení</a>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-lg-4 box">
                            <div class="box__inner">
                                <h3 class="box__title" style="height: 78px;"><a href="#" class="inverse">Vydání cestovního dokladu</a></h3>
                                <a href="#" class="btn btn-inverse btn--raw btn--more box__more">Občan a&nbsp;stát</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-lg-3">
                    <div class="guide__more">
                        <a href="#" class="btn btn-outline-primary btn--color-white">Zobrazit vše</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

Použití

  • Pro zobrazení nejdůležitějších informací
  • U jednotlivých informací je možnost prokliku na detail stránky s podrobnějším popisem
  • Objevuje se na klíčových stránkách webu, zpravidla pak na domovské stránce
  • Slouží jako rychlý přehled toho, co je pro uživatele v daném kontextu nejdůležitější
  • Může obsahovat proklik na detailnější rozcestník s větším množstvím položek

Části rozcestníku

Rozcestník se skládá z několika částí, které jsou popsány na obrázku:

Části rozcestníku

Nadpis

Pro rozcestník používejte nadpis <H2>.

Tlačítko

  • Může obsahovat proklik na detailní výpis všech položek
  • Vhodné je použití Tlačítka typu Primary Outline viz Tlačítka

Položky rozcestníku

Rozlišujte rozcestník základní a detailní:

  • základní rozcestník - doporučený počet položek 6
  • detailní rozcestník - maximální doporučený počet položek 12

V případě většího počtu položek je lepší řešit výpis jinou formou, např. jako Seznam položek. Samotné položky mohou obsahovat další prvky.

Nadpis položky

  • Používejte nadpis <h3>
  • Může na něm být umístěn odkaz
  • Měl by být krátký

Popisek

  • Používejte klasický odstavec <p>
  • Měl by být krátký

Odkaz

Viz Odkazy

Užitečné odkazy

Seznam položek

Typografie