Laufband (Marquee) — UI-Kit-Galerie

Beispiele

Text-Laufband (Maus darüber pausiert)

Vertrauen uns

Muster GmbHBeispiel AGDemo KGAcme HandelNord LogistikSüd TechnikMuster GmbHBeispiel AGDemo KGAcme HandelNord LogistikSüd Technik

Schnell, andere Richtung

30 Tage RückgabeVersand ab 29 € freiSichere ZahlungSupport aus Deutschland30 Tage RückgabeVersand ab 29 € freiSichere ZahlungSupport aus Deutschland

Eigenschaften

Prop	Typ	Default	Builder-Label
tone	string: dark \| gray \| light	"light"	Ton (Theme liefert die Werte)
title	string	""	Überschrift
items *	array	—	Einträge
direction	string: left \| right	"left"	Laufrichtung
speed	string: slow \| normal \| fast	"normal"	Tempo
pauseOnHover	boolean	true	Pause bei Mauskontakt
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)`
`--marquee-duration`	`32s`

Genutzte Design-Tokens

color.band.darkcolor.band.dark-mutedcolor.band.dark-textcolor.band.graycolor.band.gray-mutedcolor.band.gray-textcolor.text.defaultcolor.text.mutedfont.family.defaultsize.12size.16size.4size.6size.8text.lgtext.smtracking.wide

LLM-Notizen

section.marquee

Endlos laufendes Band für Logos oder Kurztexte (Vertrauens-Leiste, USP-Ticker).

Wichtige Props

items* = [{text}] ODER [{imageUrl, alt}] (Logos), tone (dark|gray|light), direction (left|right), speed (slow|normal|fast), pauseOnHover.

Hinweise

Der Renderer gibt die Einträge ZWEIMAL aus — so schließt sich die Lücke beim Umlauf nahtlos.
Randabblendung per mask-image; bei prefers-reduced-motion steht das Band still und bricht um.