Hero image

De hero image wordt gebruikt voor achtergronden. De achtergronden worden meestal op homepagina's gebruikt. De hero image wordt na de main ingeladen.

In de div.wrapper--hero-image onder de figure kun je content plaatsen wat je over de afbeelding wilt laten vallen. Bekijk een voorbeeld

Voorbeeld met background-image

Voorbeeld met losse afbeelding

Achtergrond afbeelding

Voorbeeld met tekst overlay

Wanneer je tekst over de afbeelding heen wilt laten vallen, moet je de extra klasse hero-image--overlay toevoegen aan de `figure. De achtergrond wordt hierdoor iets donkerder, zodat het contrast tussen tekst en achtergrond groter word en de tekst beter leesbaar is.

Tekst

Benodigde stylesheets

  • /uno/components/hero-image/hero.css