Sed diam nonumy eirmod tempor

Lorem ipsum dolor sit

Amet, consetetur sadipscing elitr

<a class="btn-primary" href="#"><p>Lorem ipsum</p></a>

Sed diam nonumy eirmod tempor

Lorem ipsum dolor sit

Amet, consetetur sadipscing elitr

<a class="btn-primary" href="#"><p>Lorem ipsum</p></a>

Avatar Integration

Hero2 mit Avatar

Verwendung von personSlug für Avatar-Anzeige

Avatar Customization

Hero2 mit angepassten Avatar-Farben

Avatar-Ring und Hintergrund für besseren Kontrast auf hellem Hintergrund

Hero2

Hero2-Komponente

Beispiel für die Hero2-Komponente mit allen wichtigen Props.

Codebeispiel

<Hero2
  title="Lorem ipsum dolor sit"
  subtitle="Amet, consetetur sadipscing elitr"
  tagline="Sed diam nonumy eirmod tempor"
  image="~/assets/images/default.png"
  backgroundImage="/images/abstracts/svg-1024/abstract-1.svg"
  isDark={false}
  disableAnimation={false}
  compact={false}
  classes={{ container: 'mb-8' }}
/>

Parameter

Bezeichner	Typ	Beschreibung	Default
title	string	Hauptüberschrift	-
subtitle	string	Untertitel	-
tagline	string	Tagline (optional)	-
image	string	Bild-URL (optional)	-
backgroundImage	string	Hintergrundbild-URL (optional)	-
personSlug	string	Person-Slug für Avatar-Anzeige (optional)	-
useVideo	boolean	Video statt Bild im Avatar anzeigen (nur mit personSlug)	false
isDark	boolean	Dunkles Design (optional)	false
disableAnimation	boolean	Deaktiviert Einblend-Animationen	false
compact	boolean	Reduzierte vertikale Abstände (kompakter Layout)	false
classes	object	Zusätzliche CSS-Klassen (optional)	{}

Fragments

Bezeichner	Beschreibung	Default
default	Standardinhalt

Wiki-Dokumentation Quellcode

Video Integration

Hero2 mit Video

Video-Unterstützung im Avatar - Hover über den Avatar zum Abspielen

Hero2 mit Video

Video-Unterstützung im Avatar

Mit dem useVideo-Prop kann ein Video statt des statischen Bildes im Avatar angezeigt werden. Das Video startet beim Hover und pausiert automatisch.

Codebeispiel

<Hero2
title="Hero2 mit Video"
subtitle="Video-Unterstützung im Avatar"
tagline="Video Integration"
personSlug="keith-schuijlenburg"
useVideo={true}
backgroundImage="/images/abstracts/svg-12-animated/3.svg"
disableAnimation={true}
/>

Parameter

Bezeichner	Typ	Beschreibung	Default
useVideo	boolean	Video statt Bild im Avatar anzeigen (erfordert video-Feld in people.json)	false

Wiki-Dokumentation Quellcode