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 | - |

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></>