Showcase
Hero-elementer
Forskellige varianter af hero-komponenten — surfaces, højder, alignment, medie-baggrunde og knap-kombinationer. Hvert eksempel nedenfor viser én konfiguration. Træk en hero op eller ned for at omarrangere.
Default · surface-inverse-soft
Standard hero
Brandets primære mørke chrome med hvid tekst og gul eyebrow. Den foretrukne hero-stil for de fleste sider — pas knapperne til konteksten.
Compact · surface
Tæt hero på lys baggrund
Kortere padding, mørk tekst på lys overflade. God til underordnede sider og sektioner hvor heroen ikke skal stjæle billedet.
Primary · brand emphasis
Hold farverne i centrum
Brand-overfladen sat fuldt på. Brug sparsomt — primary er ekstremt synlig og fungerer bedst som signal-moment, ikke som standard.
Image bg · surface-inverse-soft
Stadion under lyset
Heroen har et billede som baggrund. Surface-inverse-soft er valgt for at give hvid tekst og gul eyebrow ovenpå billedet — surfacen er også synlig under load og i transparente kanter.
Video bg
Levende baggrund
Auto-loop video bag heroen. Posteren vises mens videoen indlæses, og surfacen tager over hvis videoen ikke kan afspille.
Custom hex · light text
Brugerdefineret farve
En engangsfarve kan ikke parres af design-systemet, så editoren vælger Lys eller Mørk tekst eksplicit. Her er heroen sat til en mørk grøn med lys tekst.
Right-aligned · all button variants
Højrestillet hero
Indholdet kan stilles til højre, og du kan have flere knapper i en række. Her er alle fire button-varianter ved siden af hinanden.