Hero

Waarvoor gebruik ik dit?

Een hero image is een grote afbeelding met eventueel tekst dat veelal bovenaan een pagina wordt gezet. Het bevat een visueel aantrekkelijk beeld en is vaak het eerste wat de bezoeker ziet. Dit component staat ook bekend als een banner.

Een voorbeeld

Dit component leent zich uitstekend voor de homepagina. Door de hero te voorzien van tekst kun je een bezoeker duidelijk maken waar de pagina over gaat en eventueel met behulp van buttons doorsturen naar vervolgpagina’s.

Maak slim gebruik van light en dark mode. Plaats witte tekst op een donkere afbeelding, en vice versa. Houdt rekening met de kijkrichting. Het brein volgt automatisch het beeld dat gebruik wordt.

Component variaties

Image hero with CTA

Image Hero with CTA

A hero image is a large web banner image, prominently placed on a web page. It is often the first visual element a visitor encounters on the site.

Video Hero

Video Hero

A hero image is a large web banner image, prominently placed on a web page. It is often the first visual element a visitor encounters on the site.

Illustration Hero in dark mode

Illustration Hero

A hero image is a large web banner image, prominently placed on a web page. It is often the first visual element a visitor encounters on the site.

Responsive Lottie Hero in light mode

Responsive Lottie Hero

A hero image is a large web banner image, prominently placed on a web page. It is often the first visual element a visitor encounters on the site.

Search Hero

Search Hero

A hero image is a large web banner image, prominently placed on a web page. It is often the first visual element a visitor encounters on the site.