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.

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).

Varianta s obrázkem nalevo. Stačí přidat .box-hero--inverse na box-hero

Stačí přidat .box-hero--background-img na box-hero

Pro situace, kdy nechceme obrázek roztahovat donekonečna na velikost obrazovky. Stačí přidat .box-hero--background-img, .box-hero--background-<barva> a ideálně i .no-overlay na box-hero (bez .no-overlay se barva ztmaví).

Stačí přidat .box-hero--background-img a .box-hero--background-img-gradient na box-hero

Stačí přidat .box-hero__title--light na .box-hero__title a dovnitř strong element pro zvýraznění slova/fráze