Eyebrow Styles

Eyebrow - Icon 02

Füge mit dem Eyebrow Icon 02 CSS-Rezept in X-Bar und der wpt-eyebrow-Klasse ein kreisförmiges Target-Icon zu Kadence Eyebrow-Headings hinzu.

Was Eyebrow Icon 02 macht

Eyebrow Icon 02 ergänzt dein Eyebrow-Label um ein kreisförmiges, target-artiges Icon, indem zwei Kreise hinter oder neben dem Text geschichtet werden.

Das Rezept nutzt dafür die Pseudo-Elemente ::before und ::after auf einer Kadence Advanced Heading mit der benutzerdefinierten Klasse wpt-eyebrow:

::before zeichnet einen größeren äußeren Kreis mit etwa 35 % Deckkraft in deiner ersten Palettenfarbe.
::after zeichnet einen kleineren inneren Kreis mit voller Deckkraft in derselben Palettenfarbe.
Beide Kreise sind absolut positioniert, sodass sie als kompaktes, geschichtetes Icon direkt am Eyebrow-Label erscheinen.

Nutze dieses Rezept, wenn sich dein Eyebrow eher wie ein fokussierender Target-Marker als nur wie ein einfaches Textlabel anfühlen soll.

Alle Eyebrow-Rezepte teilen sich das gleiche Grund-Setup:

Nutze einen Kadence Advanced Heading-Block für den Eyebrow-Text.
Vergib die benutzerdefinierte Klasse wpt-eyebrow für diese Überschrift.
Öffne X-Bar, suche das passende Eyebrow-Rezept und kopiere das CSS aus X-Bar in den X-Bar-Editor auf deiner Website.

Eyebrow Icon 02 stylt nur Elemente mit der Klasse wpt-eyebrow. Achte also darauf, dass du die Klasse an der richtigen Überschrift setzt.

Eyebrow Icon 02 auf eine Überschrift anwenden

Nutze diese Schritte, um ein normales Eyebrow-Label in die Eyebrow Icon 02 Target-Variante zu verwandeln.

Eyebrow-Überschrift hinzufügen oder auswählen

Füge im WordPress-Editor einen Kadence Advanced Heading-Block dort ein, wo der Eyebrow erscheinen soll (typischerweise über einer Hauptüberschrift).
Trage deinen Eyebrow-Text ein, zum Beispiel Neue Funktion oder Case Study.

Du siehst jetzt eine normale Kadence-Überschrift mit deinem Eyebrow-Text, aber noch ohne spezielle Icon-Gestaltung.

Die Klasse wpt-eyebrow vergeben

Wähle die Kadence Advanced Heading aus und öffne das Panel Erweitert.
Trage im Feld Zusätzliche CSS-Klasse(n) den Wert wpt-eyebrow ein.

Die Eyebrow-Überschrift besitzt jetzt den Hook, den das Rezept erwartet. Die Icon-Gestaltung erscheint aber erst, nachdem du das CSS aus X-Bar ergänzt hast.

Eyebrow Icon 02 CSS aus X-Bar kopieren

Öffne X-Bar und suche das Frontend-Rezept Eyebrow Icon 02.
Kopiere das vollständige CSS-Snippet für dieses Rezept aus X-Bar.
Öffne auf deiner Website den X-Bar-Editor-Bereich, in dem du dein CSS für Frontend-Rezepte verwaltest.
Füge das Eyebrow Icon 02 CSS in den Editor ein und speichere.

Nach dem Speichern lädst du die Seite mit deiner Eyebrow-Überschrift neu. Du solltest nun ein geschichtetes Kreis-Icon sehen, das eng mit dem Eyebrow-Text sitzt, mit einem weicheren äußeren Ring und einem soliden inneren Kreis.

Abstände und Ausrichtung anpassen (optional)

Das Rezept positioniert die Kreise absolut zur Eyebrow-Überschrift. Feintuning nimmst du daher primär über Abstände und Ausrichtung der Heading vor:

Nutze die Kadence-Steuerungen, um Innenabstand links/rechts der Eyebrow-Überschrift anzupassen, falls das Icon zu nah oder zu weit vom Text entfernt wirkt.
Passe Zeilenhöhe oder Innenabstand oben/unten an, falls das Icon vertikal leicht versetzt gegenüber umliegenden Überschriften erscheint.
Wenn die erste Palettenfarbe sehr hell oder sehr dunkel ist, passe die Farben im Rezept-CSS in X-Bar an, damit der Kontrast erhalten bleibt.

Ist alles sauber abgestimmt, wirkt das Icon wie ein präziser Target-Marker, der den Blick auf den Eyebrow lenkt, ohne die Hauptüberschrift zu überlagern.

Wie das Icon aufgebaut ist

Eyebrow Icon 02 nutzt Pseudo-Elemente und Positionierung statt zusätzlichem Markup:

Äußerer Kreis (::before)
Zeichnet einen etwas größeren Kreis mit geringerer Deckkraft (circa 35 %) in deiner ersten Palettenfarbe. Das erzeugt einen weichen Halo-Effekt.
Innerer Kreis (::after)
Zeichnet einen kleineren, voll deckenden Kreis in derselben Farbe, zentriert über dem äußeren Kreis, sodass ein Target-ähnliches Icon entsteht.
Absolute Positionierung
Beide Pseudo-Elemente sind absolut relativ zum Eyebrow-Label positioniert, damit die Kreise immer gemeinsam mit dem Text wandern, auch wenn sich das Layout verschiebt.

Da das Rezept nur ::before und ::after auf wpt-eyebrow nutzt, bleibt dein HTML sauber, während du trotzdem einen grafischen Akzent erhältst.

Wann du Eyebrow Icon 02 einsetzen solltest

Eyebrow Icon 02 passt besonders gut, wenn dein Eyebrow als präziser Fokuspunkt wirken soll:

Hervorheben von limitierten Angeboten oder neuen Features
Markieren eines Anker-Elements in einer Reihe von Cards oder Sektionen
Aufmerksamkeit auf Schlüssel-Inhalte in längeren Seiten lenken

Wenn du lieber eine ruhigere, reine Textbehandlung möchtest, nutze stattdessen eines der Pill-Eyebrow-Rezepte.

Eyebrow - Icon 02

Was Eyebrow Icon 02 macht

Eyebrow Icon 02 auf eine Überschrift anwenden

Wie das Icon aufgebaut ist

Wann du Eyebrow Icon 02 einsetzen solltest

Verwandte Rezepte und Ressourcen