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.

Primær handling Læs mere

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.

Køb sæsonkort

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.

Læs mere

Video bg

Levende baggrund

Auto-loop video bag heroen. Posteren vises mens videoen indlæses, og surfacen tager over hvis videoen ikke kan afspille.

Se kampen

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.

Eksempel

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.

Solid primary Outline primary Solid secondary Outline secondary