Thinkport

Avatar

Rundes Profilbild mit Hintergrund

Die Avatar-Komponente rendert ein rundes Bild mit animiertem Hintergrundkreis. Unterstützt semantische Größen: 'sm' | 'md' | 'lg' | 'xl' (Standard: 'md').

Codebeispiel

<Avatar src="~/assets/images/personen/jens-tilman-rau.webp" alt="Tilman" size="md" animatedBg={12} />

Parameter

Bezeichner	Typ	Beschreibung	Default
src	string	Bild-URL	-
alt	string	Alternativtext	Avatar
size	"sm" \| "md" \| "lg" \| "xl" \| "hero"	Größenvariante	md
animatedBg	number	Nummer des animierten Hintergrunds (1–21)	5
video	string	Video-URL (MP4 oder WebM) - nur in hero-Variante	-
useVideo	boolean	Video statt Bild anzeigen (nur in hero-Variante)	false

Wiki-Dokumentation Quellcode

Größen

sm, md, lg, xl

Beispiele für alle Varianten.

Codebeispiel

<div class="flex items-center gap-6">
  <Avatar src="~/assets/images/personen/jens-tilman-rau.webp" alt="Tilman" size="xs" />
  <Avatar src="~/assets/images/personen/jens-tilman-rau.webp" alt="Tilman" size="sm" />
  <Avatar src="~/assets/images/personen/jens-tilman-rau.webp" alt="Tilman" size="md" />
  <Avatar src="~/assets/images/personen/jens-tilman-rau.webp" alt="Tilman" size="lg" />
  <Avatar src="~/assets/images/personen/jens-tilman-rau.webp" alt="Tilman" size="xl" />
  <Avatar src="~/assets/images/personen/jens-tilman-rau.webp" alt="Tilman" size="xxl" />
  <Avatar src="~/assets/images/personen/jens-tilman-rau.webp" alt="Tilman" size="xxxl" />
</div>

Wiki-Dokumentation Quellcode

Alle Hintergründe hier.

Farben

Animierte Hintergrundgrafiken

Beispiele für Varianten.

Codebeispiel

<div class="flex items-center gap-6">
 <Avatar src="~/assets/images/personen/jens-tilman-rau.webp" alt="Tilman" animatedBg={1} />
 <Avatar src="~/assets/images/personen/jens-tilman-rau.webp" alt="Tilman" animatedBg={3} />
 <Avatar src="~/assets/images/personen/jens-tilman-rau.webp" alt="Tilman" animatedBg={7} />
<Avatar src="~/assets/images/personen/jens-tilman-rau.webp" alt="Tilman" animatedBg={8} />
<Avatar src="~/assets/images/personen/jens-tilman-rau.webp" alt="Tilman" animatedBg={10} />
</div>

Wiki-Dokumentation Quellcode

Hero Variante

Für Hero-Sections

Die hero-Variante passt sich an den verfügbaren Platz an und verwendet einen dunklen, halbtransparenten Hintergrundkreis mit 12px breitem, halbtransparentem Rand.

Codebeispiel

<div class="w-full max-w-[600px] aspect-square mx-auto">
  <Avatar
    src="~/assets/images/personen/jens-tilman-rau.webp"
    alt="Tilman"
    size="hero"
  />
</div>

Parameter

Bezeichner	Typ	Beschreibung	Default
size	"hero"	Hero-Variante für Hero-Sections	-

Wiki-Dokumentation Quellcode

Hinweis: Video-Funktionalität funktioniert nur in der hero-Variante. Videos sollten transparente WebM-Dateien mit Alpha-Kanal sein. Das Video startet beim Hover und pausiert automatisch, wenn der Mauszeiger entfernt wird.

Video-Unterstützung

Video statt Bild in Hero-Variante

Die Avatar-Komponente unterstützt Videos in der hero-Variante. Das Video wird beim Hover abgespielt und pausiert, wenn der Mauszeiger entfernt wird. Videos sollten transparente WebM-Dateien mit Alpha-Kanal sein.

Codebeispiel

<div class="w-full max-w-[600px] aspect-square mx-auto">
  <Avatar
    src="~/assets/images/personen/jens-tilman-rau.webp"
    alt="Tilman"
    size="hero"
    video="~/assets/videos/ai-agent.webm"
    useVideo={true}
  />
</div>

Parameter

Bezeichner	Typ	Beschreibung	Default
video	string	Video-URL (MP4 oder WebM mit Alpha-Kanal)	-
useVideo	boolean	Video statt Bild anzeigen (nur in hero-Variante)	false

Wiki-Dokumentation Quellcode