1. Komponenty

Rozcestník

angl. Guide

Pomáhá uživatele nasměrovat k informacím, které hledá. 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>

Upozornění: Příklad na obrázku zcela nesplňuje směrnici o přístupnosti webového obsahu WCAG 2.1. V budoucnu bude nahrazen adekvátním příkladem.

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í

Obecně

Navigace a správné nasměrování lidí na webu potřebuje často nějaké navigační pomůcky. Rozcestník je jednou z těchto navigačních pomůcek. Jako rozcestník může sloužit například navigační lišta, odkazy nebo speciální sekce v rámci stránky (jak je tomu i na Portálu veřejné správy).

Rozcestník:

  • pomáhá lidem najít cestu ke správným informacím.
  • slouží jako rychlý přehled toho, co je pro uživatele v daném kontextu nejdůležitější.
  • u jednotlivých informací umožňuje proklik na detail stránky s podrobnějším popisem nebo proklik na detailnější rozcestník s větším množstvím položek.
  • používejte na klíčových stránkách webu, zpravidla pak na domovské stránce.
  • nepoužívejte pro všechny informace, ale pouze pro zobrazení těch nejdůležitějších nebo pro zobrazení kategorií informací.

Konkrétně

V rámci Design Systému je rozcestníkem myšlena speciální navigační sekce (například na domovské stránce Portálu veřejné správy). Informace níže v textu se tedy vztahují k tomuto konkrétnímu rozcestníku.

Části rozcestníku

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

Části rozcestníku

Upozornění: Příklad na obrázku zcela nesplňuje směrnici o přístupnosti webového obsahu WCAG 2.1. V budoucnu bude nahrazen adekvátním příkladem.

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

Podle počtu položek v rozcestníku rozlišujeme dva typy:

  • 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 jejich 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