Style guide

Základní nadpisy

Nadpis h1

Nadpis h2

Nadpis h3

Nadpis h4

Nadpis h5
Nadpis h6

Stylované nadpisy

Nadpis s dekorací

<h2 class="section__heading heading-decoration">Nadpis s dekorací</h2>

Oranžový nadpis vycentrovaný

<h2 class="section__heading section__heading--center heading-orange">Oranžový nadpis vycentrovaný</h2>

Tlačítka

Primární tlačítko 
<a href="#" class="btn btn-primary">Primární tlačítko</a>
Zelené tlačítko Červené tlačítko 
<a href="#" class="btn btn-green">Zelené tlačítko</a>
<a href="#" class="btn btn-red">Červené tlačítko</a>
Sekundární tlačítko 
<a href="#" class="btn btn-outline-primary btn-icon-left"><span class="icon-box"><i class="fal fa-coins"></i></span> Sekundární tlačítko</a>
Tlačítko s šipkou 
<a href="#" class="btn btn-outline-primary btn-icon-right btn-icon-right--move">Tlačítko s šipkou <span class="icon-box"><i class="fal fa-angle-right"></i></span></a>
Malé tlačítko Velké tlačítko 
<a href="#" class="btn btn-primary btn-sm">Malé tlačítko</a>
<a href="#" class="btn btn-primary btn-lg">Velké tlačítko</a>

Obrázky

<img src="/assets/img/demo/why-us.jpg" alt="" loading="lazy" width="240" class="aspect-1-1 rounded" />
<a href="/assets/img/demo/why-us.jpg" data-fancybox>
    <img src="/assets/img/demo/why-us.jpg" alt="" loading="lazy" width="240" class="aspect-1-1 rounded" />
</a>

Štítky

Novinky Novinky Novinky 
<a href="#" class="badge badge-primary">Novinky</a>
<a href="#" class="badge badge-outline-primary">Novinky</a>
<a href="#" class="badge badge-danger">Novinky</a>
NEOTA CZ [PNG] NEOTA CZ [PDF] NEOTA CZ [SVG] 
<a href="#" class="badge badge-outline-secondary badge-icon-left">
    <span class="icon-box">
        <i class="fal fa-download"></i>
    </span>
    NEOTA CZ [PNG]
</a>
<a href="#" class="badge badge-outline-secondary badge-icon-left">
    <span class="icon-box">
        <i class="fal fa-download"></i>
    </span>
    NEOTA CZ [PDF]
</a>
<a href="#" class="badge badge-primary badge-icon-left">
    <span class="icon-box">
        <i class="fal fa-download"></i>
    </span>
    NEOTA CZ [SVG]
</a>

Položky s ikonama / soubory ke stažení

Kdo jsme a co děláme
Otevře text v novém okně
Korporátní styl
Stáhne se PDF 
<a href="#" target="_blank" class="file file--gray">
    <div class="file__icon">
        <div class="icon-box">
            <i class="fal fa-external-link-alt" role="img" aria-hidden="true"></i>
        </div>
    </div>
    <div class="file__content">
        <strong class="file__name">Kdo jsme a co děláme</strong><br>
        <span class="file__size">
            Otevře text v novém okně
        </span>
    </div>
</a>

Odsazení

Pro odsazení prvků se používá jako základ .25rem = 4px a jeho násobky.

Pro nastavení horního a dolního odsazení je připraveno několik utilit.
Mt(.25rem), Mt(.5rem), Mt(.75rem), Mt(1rem), Mt(1.5rem), Mt(2rem), Mt(3rem), Mt(4rem)
Mb(.25rem), Mb(.5rem), Mb(.75rem), Mb(1rem), Mb(1.5rem), Mb(2rem), Mb(3rem), Mb(4rem)

Vertikální odsazení sekcí je pak obecně nastaveno na 2rem pro mobilní zobrazení a 4rem pro desktop.

Obsah sekce 
<section class="section section--gray Ta(c)">Obsah sekce</section>