Zitat-Karten (Social Proof)
Karten mit Zitat, Person, Handle und Plattform-Hinweis — statische Social-Proof-Karten ohne externen Abruf (keine Fremd-API zur Laufzeit)
Beispiele
Drei Stimmen mit Plattform-Hinweis
Stimmen
Was Teams berichten
Marie Krause@mkrauseLinkedIn
Wir haben die Auftragsabwicklung von drei Werkzeugen auf eins reduziert. Die Einarbeitung dauerte einen Nachmittag.
Jonas Weber@jweberX
Der Agenten-Chat beantwortet Rückfragen zu Beständen schneller, als wir sie früher heraussuchen konnten.
Sabine RothKundengespräch
Ein Theme-Wechsel — und die komplette Oberfläche trägt unsere Hausfarben. Das hat im Angebot den Ausschlag gegeben.
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| tone | string: dark | gray | light | "light" | Ton |
| kicker | string | "" | Kicker |
| title | string | "" | Titel |
| columns | number | 3 | Spalten (ab md) |
| quotes * | array | — | Zitate |
| spacing | string: none | sm | md | lg | xl | "none" | Eigenabstand |
* Pflicht-Prop
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--band-surface | transparent |
--band-text | var(--color-text-default) |
--band-muted | var(--color-text-muted) |
--band-line | color-mix(in srgb, var(--band-text) 14%, transparent) |
Genutzte Design-Tokens
border.hairlinecolor.accentcolor.band.darkcolor.band.dark-mutedcolor.band.dark-textcolor.band.graycolor.band.gray-mutedcolor.band.gray-textcolor.border.defaultcolor.border.strongcolor.surface.defaultcolor.text.defaultcolor.text.mutedcontainer.lgelevation.controlfont.family.defaultfont.family.displayfont.family.monofont.leading.displayfont.size.displayleading.looseradius.surfacesize.12size.4size.6size.8text.mdtext.smtext.xstracking.wideweight.boldweight.semibold