Hero boxy

Hero box - nadpisy

1) Obyčejný - výchozí
2) Inverzní - modifikační třída .box-hero--background
3) Ohraničený - modifikační třída .box-hero--bordered
4) Inverzní s grafickými prvky - modifikační třídy .box-hero--background a .box-hero--particles
5) Ohraničený s grafickými prvky - modifikační třídy .box-hero--bordered a .box-hero--particles

Pro vytvoření této ukázky jsme mezi boxy vložili elementy br pro odsazení.

Každý hero box může být i celý klikatelný. Stačí div.box-hero změnit za a[href].box-hero. Pozor je celý box odkazem, pak uvnitř nesmí být žádný odkaz ani formulářové prvky.

Studenti

Center

Hero box uvnitř layoutu

Platí i pro všechny následující případy.
1) .hero-box stačí vnořit do layoutového kontejneru .row-main
2) .row-main uvnitř .hero-box smazán

Studenti

Hero box - odsazení

Výchozí stav je bez odsazení.
1) modifikační třída .box-hero--space

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut commodi, necessitatibus ducimus, deleniti aliquid voluptas et eum minus amet explicabo distinctio dolore, porro, eveniet molestias facere ipsam temporibus possimus debitis?

Studenti

Hero box - velikosti

Ve výchozím stavu je box vysoký dle obsahu. Pokud se nastaví třídy velikostí obsah se začne centrovat. Pokud obsah přeteče zadanou velikost, box se natáhne.
1) modifikační třída .box-hero--size-s
2) modifikační třída .box-hero--size-m
3) modifikační třída .box-hero--size-l

Studenti

Hero box - s obrázkem

Obrázek je implementován klasickým IMG tagem. Budeme moci pohodlně využít SRCSET.
Obrázek je obalen div.box-hero__img a je v kódu dříve než obsah (nutné pro responsive).

Studenti

Hero box na celou šířku - s obrázkem

Obrázek je implementován klasickým IMG tagem. Budeme moci pohodlně využít SRCSET.
Obrázek je obalen div.box-hero__img a je v kódu dříve než obsah (nutné pro responsive).

Studenti

Hero box - různé kombinace a obsahy