1. Komponenty

Patička

angl. Footer

Jedná se o spodní část stránky, která obsahuje dané společné prvky a rozcestník na nejdůležitější části webu a další důležité odkazy.

Ukázka patičky na Portálu veřejné správy.


<div class="footer" role="contentinfo">
    <div class="container">
        <div class="footer__inner">
            <div class="footer__links">
                <div class="row">
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="footer__box pb-2 pb-lg-0">
                            <h3>Užitečné odkazy</h3>
                            <p class="smaller-2">Další užitečné informace z&nbsp;různých oblastí výkonu veřejné správy.</p>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="footer__box pb-2 pb-sm-4 pb-lg-0">
                            <ul>
                                <li><a href="https://www.hrad.cz/" class="external" title="Externí odkaz - otevře se do nového okna" target="_blank">Prezident ČR</a></li>
                                <li><a href="https://www.vlada.cz/" class="external" title="Externí odkaz - otevře se do nového okna" target="_blank">Vláda ČR</a></li>
                                <li><a href="https://www.psp.cz/" class="external" title="Externí odkaz - otevře se do nového okna" target="_blank">Poslanecká sněmovna ČR</a></li>
                                <li><a href="http://www.senat.cz/" class="external" title="Externí odkaz - otevře se do nového okna" target="_blank">Senát ČR</a></li>
                                <li><a href="https://www.mojedatovaschranka.cz/sds/searchForm.do " class="external" title="Externí odkaz - otevře se do nového okna" target="_blank">Seznam datových schránek</a></li>                                
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="footer__box pb-4 pb-sm-0">
                            <ul>
                                <li><a href="http://www.smocr.cz/" class="external" title="Externí odkaz - otevře se do nového okna" target="_blank">Svaz měst a obcí ČR</a></li>
                                <li><a href="https://www.vestnikverejnychzakazek.cz/" class="external" title="Externí odkaz - otevře se do nového okna" target="_blank">Veřejné zakázky</a></li>
                                <li><a href="http://www.mvcr.cz/sluzba/" class="external" title="Externí odkaz - otevře se do nového okna" target="_blank">Státní služba</a></li>
                                <li><a href="https://rpp-ais.egon.gov.cz/gen/agendy-detail/" class="external" title="Externí odkaz - otevře se do nového okna" target="_blank">Agendy Org. veř. moci</a></li>
                                <li><a href="https://www.uradprace.cz" class="external" title="Externí odkaz - otevře se do nového okna" target="_blank">Úřad práce</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                            <div class="footer__box">
                            <ul class="bigger">
                                <li><a href="#odkazy/cr">Informace<br> o&nbsp;České republice</a></li>
                                <li><a href="#odkazy/eu">Informace<br> o&nbsp;Evropské unii</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer__common">
                <div class="row">
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="footer__box pb-3 pb-sm-0">
                            <ul>
                                <li><a href="#">Prohlášení o přístupnosti</a></li>
                                <li><a href="#">Historie přístupů</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <div class="footer__box pb-3 pb-lg-0">
                            <ul>
                                <li><a href="#">Kompletní seznam odkazů</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-lg-6">
                        <div class="footer__box">
                            <p class="footer__brand">
                                2020&nbsp;© Ministerstvo vnitra • Informace jsou poskytovány v&nbsp;souladu se zákonem č.&nbsp;106/1999&nbsp;Sb., o&nbsp;svobodném přístupu k&nbsp;informacím.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Obecné rozložení webové stránky Obecné rozložení stránky

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í

Patička je součástí každé stránky webu. Klientské zóny a interní aplikace patičku mít nemusí.

Obsah patičky

Obsah se může lišit podle webové stránky, na které je patička umístěna.

Patička by měla obsahovat

vždy

  • prohlášení o přístupnosti
  • tzv. copyright nebo-li autorská práva - součástí je rok a symbol pro copyright (jedná se o jednoduchou ochranu proti plagiátorství)

Příklad

2020 © MINISTERSTVO VNITRA

většinou

  • informace o zpracování osobních údajů a o ochraně soukromí (tzv. cookies)
  • odkazy na sociální sítě - nejčastěji formou ikony dané sociální sítě
  • kontakt na subjekt, kterému patří daná webová stránka (telefonní číslo, e-mail, odkaz na kontaktní formulář, atp.)
  • odkazy, které návštěvníkovi webu pomohou v přechodu na další stránky

Patička může sloužit jako pomoc lidem, kteří nenalezli, co hledali. V tom případě je možné do patičky vypsat navigaci z hlavičky (důležité je zvážit do jaké úrovně).

Užitečné odkazy