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