Obrázek v headeru je defaultně zatmavený tmavou barvou s 50% průhledností.

Zatmavení lze odstranit modifikátorem .b-hero-header__img--clear.

Header má ve výchozím stavu na mobilu pevnou výšku. V případě delšího obsahu tak může dojít k oříznutí. Pro tento případ lze přidat modifikátor .b-hero-header--autoheight, který zajistí přizpůsobení výšky obsahu.

V případě, že je potřeba mít vizuál na pozadí různý na mobilní, tabletové a desktopové verzi (např. z důvodu nevhodného ořezu motivu na obrázku), lze jednotlivé obrázky obalit do divu .b-hero-header__img-holder a následně modifikační třídou určit, který obrázek se má zobrazit na kterém breakpointu:

• .b-hero-header__img-holder--m - se zobrazí do 767 px
• .b-hero-header__img-holder--t - se zobrazí od 768 px do 1279 px
• .b-hero-header__img-holder--d - se zobrazí od 1280 px

Toto je pak ideální kombinovat s modifikátorem .b-hero-header--scalable, díky kterému lze dosáhnout fluidního přizpůsobování výšky banneru šířce okna (obrázek se tedy při zachování správných rozměrů zvětšuje/zmenšuje a neořezává). Mobilní obrázek počítá s rozměry 768x540 px, tabletový s rozměry 1024x540 px a desktopový s rozměry 1440x540 px. Pozor na příliš dlouhý obsah v banneru, kterému se nyní výška nebude přizpůsobovat a je možné, že na některém rozměru obrazovky může vytéct.

Header může mít i průhledné pozadí bez obrázku pomocí modifikátoru .b-hero-header--blank.

Ve výchozím stavu je obsah vycentrován, lze ho ale zarovnat k levému dolnímu rohu modifikátorem .b-hero-header__content--bottom (použito například na stránce detailu oboru).

Ke komponentě lze přidat i submenu, je potřeba přidat modifikátor .b-hero-header--nav (použito například na stránce detailu programu).