# Heroes
# Hero skeleton
design front-end roxen cmsWordt gebruikt bij de filterpagina's, zoals opleidingszoeker. Bevat altijd foto en breadcrumb en geen titel. In de breadcrumb wordt als laatste item de titel van de huidige pagina getoond.
# Hero skinny
design front-end roxen cmsWordt gebruikt bij de landingspagina's. Bevat altijd foto en breadcrumb en geen titel.
# Hero Regular
design front-end roxen cmsGebruiken bij content pagina's, nieuws, events, artikelen, lector pagina's. Bevat altijd een breadcrumb, foto en titel. Kan daarnaast ook intro en meta data bevatten zoals datum, leestijd en tags. In de breadcrumb wordt als laatste item de titel van de bovenliggende pagina getoond.
De zwarte rand is voor het gebruik van de focusgebieden van de HAN.
De Hero course regular is een variant op de achterliggende pagina's van de opleidingen.
# Hero Fat
design front-end roxen cms# Concept
De Hero Fat component is een belangrijk onderdeel van de campagnepagina. Het is de beste manier om de emoties, doelstellingen en het karakter van de campagne over te brengen. Dit component komt voor op campagnepagina's en andere promotiepagina's.
# Notes voor content
- Houd de titel kort en direct
- Maak gebruik van stoer beeldmateriaal. Het beeldmateriaal dient in lijn te zijn met de online marketing campagnes.
- Zorg ervoor dat de Page Title niet door het focuspunt van de foto loopt.
- Houd de titels van events kort
- Houd de intro-tekst kort. Max. body tekst: 300 karakters
# Te gebruiken iconen
| icoon | toepassing | naam |
|---|---|---|
| Link | arrow | |
| Takeover | takeover | |
| Inschrijven of aanmelden | enter | |
| Download | save | |
| Meer informatie en Contact | helpdesk | |
| Locatie | marker | |
| Nieuwsbrief | pen | |
| Langskomen | people |
# Notes voor DEV
- Achtergrond image is 100% viewport width en afbeelding.
- Bevat min. 1 CTA button max. 3
- Volgorde knoppen is altijd 1: Rood, 2: Zwart, 3: Grijs.
# Hero Whale
design front-end roxen cmsDeze hero heeft als doel te inspireren en te converteren. Wordt gebruikt voor oa event's en vacatures. Het is een afgeleide van de opleidingspagina overzicht hero (course hero whale). Bevat altijd een breadcrumb. In de breadcrumb wordt als laatste item de titel van de bovenliggende pagina getoond.
# Content:
- Bepaal wat je primaire call to action is en welke handeling er achter zit. Max 3 call to action buttons.
- Houd titels zo kort, krachtig en activerend mogelijk. Streef naar maximaal 80 karakters.
- Inleiding maximaal 250 karakters.
# Te gebruiken iconen
| icoon | toepassing | naam |
|---|---|---|
| Inschrijven of aanmelden | enter | |
| Download | save | |
| Meer informatie en Contact | helpdesk | |
| Email contact | ||
| Locatie | marker | |
| Nieuwsbrief | pen | |
| Langskomen | people | |
| Kennis beschikbaarheid | search |
# Development:
Zelfde werking als de course hero whale.
# Hero Home
design front-end roxen cms# Hero Search
design front-end roxen cmsWordt gebruikt op de zoekpagina.