Menu Uno designsysteem 5.3.4

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

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