Thinkport

Lorem ipsum dolor

Sit amet, consetetur sadipscing elitr

Tilman

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Cloud Engineer

Tilman

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Cloud Engineer

Cite

Zitate von Teammitgliedern

Die Cite-Komponente zeigt Zitate von Teammitgliedern aus der Team-Collection an. Sie rendert Profilbild, Name, Position und das Zitat. Optional kann das Layout gespiegelt (Avatar rechts) werden und externe Speaker können unterstützt werden.

Codebeispiel

<Cite
    title="Lorem ipsum dolor"
    subtitle="Sit amet, consetetur sadipscing elitr"
    slug="jens-tilman-rau"
    isDark={false}
    classes={{
      container: 'custom-container-class'
    }}
    bg={<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>}
  >
    "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
  </Cite>

Parameter

Bezeichner	Typ	Beschreibung	Default
title	string	Titel der Komponente	-
subtitle	string	Untertitel der Komponente	-
tagline	string	Tagline über dem Titel	-
slug	string	Slug des Teammitglieds (aus der Team-Collection)	-
quote	string	Das Zitat des Teammitglieds	-
isDark	boolean	Dunkles Design	false
isReversed	boolean	Avatar auf Desktop rechts platzieren	false
classes	object	Zusätzliche CSS-Klassen	{}
bg	string	Hintergrundinhalt
animatedBg	number	Nummer des animierten Hintergrunds (1–21)	5
avatarSize	"sm" \| "md" \| "lg" \| "xl"	Größe des Avatars	md
id	string	Optionale feste ID für das Widget (sonst Hash des Members)	-
isExternal	boolean	Externer Speaker (nicht aus Team-Collection)	false
speakerName	string	Name des externen Speakers	-
speakerPosition	string	Position/Funktion des externen Speakers	-
speakerAvatar	string	Avatar-URL des externen Speakers	-
speakerLinkedin	string	LinkedIn-URL des externen Speakers	-
speakerEmail	string	E-Mail des externen Speakers	-

Wiki-Dokumentation Quellcode

Tilman

Lorem ipsum

Cloud Engineer

Tilman

Consetetur sadipscing

Cloud Engineer

Tilman

Sed diam nonumy

Cloud Engineer

Tilman

Ut labore et dolore

Cloud Engineer

Avatar-Größen in Cite

avatarSize

Avatargröße pro Widget konfigurierbar.

Codebeispiel

<>
<Cite slug="jens-tilman-rau" avatarSize="sm">Lorem ipsum</Cite>
<Cite slug="jens-tilman-rau" avatarSize="md">Consetetur sadipscing</Cite>
<Cite slug="jens-tilman-rau" avatarSize="lg">Sed diam nonumy</Cite>
<Cite slug="jens-tilman-rau" avatarSize="xl">Ut labore et dolore</Cite>
</>

Wiki-Dokumentation Quellcode