Hero modulet skaber muligheden for at danne et visuelt indtryk med eller uden tekst. Når der indsættes tekst i hero modulet, placeres det oven på baggrundsbilledet på store skærmstørrelser, og under billedet på mobile enheder og små skærmstørrelser.

Overskrifter

I modulet er det muligt at indsætte en overskrift og underoverskrift. Som standard er overskriften en H2 overskrift og underoverskriften er en H3 overskrift. Det er muligt at indstille overskriften til at være en H1 overskrift. Hvis denne indstilling er slået til, vil underoverskriften automatisk blive til en H2 overskrift.

Derudover er det muligt med "Byt overskrift og underoverskrift størrelse" indstilingen at bytte rundt på den visuelle størrelse af overskrift og underoverskrift. På denne måde blive overskriften visuelt mindre, og underoverskriften bliver visuelt større.

Vis som label

Hvis denne indstilling er slået til, vil modulets overskrift blive vist som et label øverst til venstre over tekstens indholdskasse. Som standard vises modulets overskrift inde i kassen sammen med det andet tekstindhold.

Tekst/indholdsplacering

Tekst i hero modulet placeres i en kasse oven på baggrundsbilledet. Det er muligt at indstille hvorhenne denne kasse placeres både vertikalt og horisontalt. Derudover er det også muligt at angive om tekst skal venstrejusteres, højrejusteres eller centreres i kassen. Der er følgende placerings muligheder for kassen:

• Øverst til venstre
• Øverst centreret
• Øverst til højre
• I midten til venstre
• I midten centreret
• I midten til højre
• Nederst til venstre
• Nederst centreret
• Nederst til højre.

Derudover er det også muligt at angive om kassen skal være fuldbredde af modulet. Som standard fylder kassen maks 2/3 af modulets bredde på store skærmstørrelser.

Link

Det er muligt at indsætte et link på hero modulet som gør hele hero modulet til et klikbart link.

Baggrundsbillede

Hero modulet følger forskellige størrelser afhængig af hvor i layoutet det er placeret. Når hero modulet er indstillet til en af disse størrelser, har baggrundsbilledet et andet minimum aspektratio. Hvis tekstindholdet fylder mere end billedet, tilpasser billedet sig automatisk og blive højerer for at kunne akkomodere den store tekstmængde. Minimumsratioerne ses nedenfor:

• Fullscreen: Når hero modulet er sat til at gå i fuldskærm, er billedratioet 4:1
• 12 kolonner: Når hero modulet er sat til at være 12 kolonner, er billedratioet 20:9,4
• 1-11 kolonner: Når hero modulet er sat til at være mellem 1 og 11 kolonner bredt, er billedratioet 16:9

Se flere eksempler på hero moduler nederst på siden. Ønsker du et andet hero design, er der også Hero split modulet.

Hero moduler kan også indsættes i Karrusel modulet.