Na hlavičku .header je možné přidat modifikátor .header--hero, pak podsune tuto molekulu pod hlavičku a v horní části hero headeru se zobrazí barevný přechod do černé pro zvýraznění hlavičky. Tento přechod je možné eliminovat přidáním třídy .no-gradient na .header.

Pomocí přidání třídy .header--hero--noline na hlavičce je možné odstranit horizontální pruhy pod primárním a sekundárním menu, pokud výrazně zasahují do grafiky hero headeru. To je však k použití pouze ve výjimečných případech, horizontální čáry jsou jinak poměrně silný grafický prvek, který není dobré odstraňovat.

Komponenta vycházející z defaultní komponenty. Přidána je modifikační classa .box-hero-header--bg. Navíc jsou pro obarvení textu použity modifikační classy z SK mini frameworku.

Komponenta vycházející z defaultní komponenty. Navíc pro obarvení pozadí za obsahem je přidán modifikátor box-hero-header__content--bg na box-hero-header__content.

Komponenta vycházející z defaultní komponenty. Navíc pro obarvení pozadí na bílou barvu jsou přidány modifikátory box-hero-header__content--bg a box-hero-header__content--bg--white na box-hero-header__content.

Komponenta vycházející z defaultní komponenty. Navíc pro obarvení pozadí na bílou barvu jsou přidány modifikátory box-hero-header__content--bg, box-hero-header__content--bg--transparent a box-hero-header__content--bg--white na box-hero-header__content.

Komponenta vycházející z defaultní komponenty. Pro zobrazení obrázku na celou výšku obrazovky je potřeba přidat na box-hero-header modifikátor box-hero-header--full.

V případě, kdy je header první na stránce, ale není zasunutý pod záhlaví a je žádoucí, aby byl vidět celý při iniciální zobrazení stránky (tedy jeho výška má být výška obrazovky - výška záhlaví), je možné na něj přidat třídu box-hero-header--full--skipheader. Výška hero headeru se pak po načtení stránky upraví javascriptem.

Komponenta vycházející z komponenty na celou výšku obrazovky. Pro zobrazení obsahu napravo je potřeba přidat na box-hero-header__content modifikátor box-hero-header__content--right.

Toto zarovnání lze použít i na komponentu, která není na celou výšku obrazovky

Komponenta vycházející z komponenty na celou výšku obrazovky. Pro zobrazení obsahu napravo je potřeba přidat na box-hero-header__content modifikátor box-hero-header__content--bottom.

Toto zarovnání lze použít pouze na komponentu, která je na celou výšku obrazovky

Kombinace dvou předchozích příkladů.

Obsah je v tomto případě roztažený přes celou šířku obrazovky. Třída na .box-hero-header__content je .box-hero-header__content--full-width.

Obsah je v tomto případě roztažený přes celou šířku obrazovky. Třída na .box-hero-header__content je .box-hero-header__content--full-width a .box-hero-header__content--bottom.

Obsah je v tomto případě roztažený přes celou šířku obrazovky, pouze však v mobilním rozlišení. Je potřeba přidat na box-hero-header modifikátor box-hero-header--full-mobile.

Komponenta vycházející z defaultní komponenty. Navíc je zde použito video na pozadí místo obrázku. Video začne hrát samo po načtení, hraje ve smyčce a beze zvuku.

Pro možnost pozastavení videa je potřeba přidat element .box-hero-header__video-controls, viz ukázka.

Je možné nastavit různé zdrojové soubory pro různá rozlišení obrazovky přes atributy data-desktop (>= 1080px), data-tablet (>= 720px) a data-mobile (< 720px) na elementu video. V takovém případě je potřeba vynechat atribut src.

Je také doporučeno použít atribut poster, kterým se nastaví URL obrázku, jenž se zobrazí v době načítání videa.