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