CP Registry

TextHighlight

Inline-Akzent für einzelne Worte oder kurze Phrasen. Sieben Stile (marker, underline, strikethrough, box, glow, spotlight, scroll-driven-marker) in vier Farbvarianten — scroll-basierte Animation via animation-timeline: view(), kein JS in supportenden Browsern.

Stile

Sieben Hervorhebungs-Stile — alle inline, können über Zeilenumbruch hinweg weiterlaufen.

Marker (Hintergrund)

Der schnellste Weg zur Förderung — einfach erklärt .

<p class="text-lg">Der schnellste Weg zur Förderung — <TextHighlight style="marker" color="primary">einfach erklärt</TextHighlight>.</p>

Underline (dicker Strich)

Klimaneutral bis 2040 — für alle staedtischen Liegenschaften.

<p class="text-lg">Klimaneutral bis <TextHighlight style="underline" color="success" weight="bold">2040</TextHighlight> — für alle staedtischen Liegenschaften.</p>

Strikethrough (Durchstreichung)

Verbrenner ab 2030 verboten — Ziel verschoben auf 2035.

<p class="text-lg"><TextHighlight style="strikethrough" color="warning">Verbrenner ab 2030 verboten</TextHighlight> — Ziel verschoben auf 2035.</p>

Box (Rahmen)

Die Antragsfrist endet am 31. März .

<p class="text-lg">Die Antragsfrist endet am <TextHighlight style="box" color="primary" weight="bold">31. März</TextHighlight>.</p>

Glow (Subtiler Color-Glow)

Förderung jetzt beantragen — kein Verwaltungsaufwand.

<p class="text-lg">Förderung jetzt <TextHighlight style="glow" color="accent" weight="bold">beantragen</TextHighlight> — kein Verwaltungsaufwand.</p>

Spotlight (Hover-Glow)

Jetzt kostenlos registrieren und direkt starten.

↑ Mit der Maus über den Text fahren.

<p class="text-lg">Jetzt <TextHighlight style="spotlight" color="primary">kostenlos registrieren</TextHighlight> und direkt starten.</p>

Scroll-Driven Marker (CSS-only Scroll-Animation)

beim Scrollen sichtbar — kein JS, rein scroll-driven.

Hinweis: Der Effekt wird sichtbar, wenn das Element in den Viewport gescrollt wird. Auf dieser Seite (Element bereits im Viewport beim Laden) ist der Endzustand direkt sichtbar — der Effekt entfaltet sich im echten Kontext weiter unten auf einer langen Seite.

<TextHighlight style="scroll-driven-marker" color="primary">beim Scrollen sichtbar</TextHighlight>

Farbvarianten

Vier Tokens — primary (Brand), accent (Sekundär), warning (Achtung), success (positiv).

Marker in vier Farben

primary accent warning success 

<TextHighlight style="marker" color="primary">primary</TextHighlight>
<TextHighlight style="marker" color="accent">accent</TextHighlight>
<TextHighlight style="marker" color="warning">warning</TextHighlight>
<TextHighlight style="marker" color="success">success</TextHighlight>

Glow in vier Farben

primary accent warning success 

<TextHighlight style="glow" color="primary" weight="bold">primary</TextHighlight>
<TextHighlight style="glow" color="accent" weight="bold">accent</TextHighlight>
<TextHighlight style="glow" color="warning" weight="bold">warning</TextHighlight>
<TextHighlight style="glow" color="success" weight="bold">success</TextHighlight>

Animierte Hervorhebung

Mit animate läuft die Hervorhebung per animation-timeline: view() beim Hineinscrollen — kein JS in Chrome 115+ und Safari 18+. Firefox-Fallback: IntersectionObserver, der nur aktiviert wird wenn CSS.supports('animation-timeline', 'view()') false ergibt. Respektiert prefers-reduced-motion.

Animierter Marker im Lead-Text

187 neue Ladesäulen sind jetzt aktiv im Stadtgebiet — Förderung war vollständig ausgeschoepft . 

<p class="text-2xl leading-relaxed">
  187 neue Ladesäulen sind <TextHighlight style="marker" color="primary" animate>jetzt aktiv</TextHighlight> im Stadtgebiet — Förderung war <TextHighlight style="underline" color="success" animate>vollständig ausgeschoepft</TextHighlight>.
</p>

Strikethrough als Korrektur-Effekt

Antrag schwierig — Antrag dauert nur 12 Minuten. 

<p class="text-xl">
  <TextHighlight style="strikethrough" color="warning" animate>Antrag schwierig</TextHighlight> — Antrag dauert nur 12 Minuten.
</p>

Redakteurshinweise

Wann einsetzen

  • Lead-Sätze auf Landingpages — eine Hervorhebung pro Satz
  • Gross gesetzte Editorial-Headlines mit Akzent-Wort
  • Strikethrough für Korrekturen (vorher/jetzt)
  • Box für wichtige Daten (Frist, Antragsschluss)
  • Glow für subtile Akzente in Hero-Momenten (mit weight="bold")
  • Spotlight für interaktive Highlights in CTA-Texten

Inhalts-Empfehlungen

  • Maximal 3 Worte pro Highlight — mehr verliert die Wirkung
  • Eine Hervorhebung pro Absatz, nicht zwei nebeneinander
  • Animation nur bei Lead-Texten oben, nicht im Fließtext
  • Color "warning" sparsam — sonst Inflation der Bedeutung
  • Glow + Spotlight nicht zusammen auf derselben Seite verwenden

Mobile & A11y

  • Semantisch <mark> — wird von Screen-Readern als Hervorhebung interpretiert
  • prefers-reduced-motion: alle Animationen und Glow-Effekte deaktiviert
  • prefers-contrast: more: glow wechselt zu solidem Unterstrich
  • box-decoration-break: clone — sauberer Umbruch über Zeilen
  • Glow und Spotlight sind rein dekorativ — keine Information ausschließlich über Farbe

Browser-Unterstützung

  • animation-timeline: view(): Chrome 115+, Safari 18+
  • Firefox: IntersectionObserver als Conditional-Fallback (kein JS in anderen Browsern)
  • @property: Chrome 85+, Safari 16.4+, Firefox 128+
  • color-mix(in oklch): alle modernen Browser

Installation

cp-components add texthighlight