Eyebrow - Pill 02
Verwandle dein Eyebrow-Label in eine pillenförmige Kontur mit sanftem Innenleuchten, die deine erste Palettenfarbe nutzt und bei Bedarf elegant auf eine reine Kontur-Pille zurückfällt.
Was Eyebrow – Pill 02 macht
Eyebrow – Pill 02 verwandelt deinen Eyebrow-Text in eine pillenförmige Kontur mit einem sanften Innenleuchten, das wirkt, als würde die Pille von den Rändern her beleuchtet. Kurze Labels werden klar gerahmt und heben sich über Hero-Überschriften oder Feature-Blöcken ab, ohne den Hauptinhalt zu überstrahlen.
Die Pille zeichnet zunächst einen 1px-Rahmen in deiner ersten Palettenfarbe und legt dann einen radialen Verlauf darüber, der an den Pillenrändern mit derselben Farbe startet und zur Mitte hin transparent ausläuft. Wenn dieser Verlaufs-Effekt im Browser nicht unterstützt wird, fällt das Rezept auf eine saubere, reine Kontur-Pille zurück, sodass das Label weiterhin bewusst gestaltet wirkt.
Alle Eyebrow-Styles teilen sich das gleiche Grund-Setup:
-
Verwende einen Kadence Advanced Heading-Block für deinen Eyebrow-Text.
-
Füge im Reiter Erweitert die Eyebrow-Klasse
wpt-eyebrowim Feld für zusätzliche CSS-Klassen ein. -
Wende anschließend das spezifische X-Bar-Rezept für die Eyebrow-Variante an, die du nutzen möchtest.
Nutze dieses Rezept, wenn du ein Eyebrow-Label möchtest, das räumlicher und hochwertiger wirkt als eine flache Pille – besonders auf dunklen Hero-Hintergründen oder über Premium-Feature-Sektionen, wo ein subtiler Glow hilft, das Label ins Auge springen zu lassen.
Eyebrow – Pill 02 Rezept anwenden
Folge diesen Schritten, um den Eyebrow – Pill 02 Look aus X-Bar auf deinen Kadence Advanced Heading Eyebrow zu legen.
Eyebrow-Überschrift vorbereiten
-
Füge dort, wo du das Eyebrow-Label haben möchtest, einen Kadence Advanced Heading-Block ein, typischerweise oberhalb einer Hero-Überschrift oder eines Feature-Titels.
-
Trage deinen Eyebrow-Text ein, zum Beispiel
New,FeaturedoderCase Study. -
Öffne in den Block-Einstellungen den Bereich Erweitert und füge
wpt-eyebrowin das Feld für zusätzliche CSS-Klassen ein.
Eyebrow – Pill 02 Rezept aus X-Bar kopieren
-
Öffne X-Bar und suche das Frontend Recipe für Eyebrow – Pill 02.
-
Nutze die Kopierfunktion in X-Bar, um den kompletten Rezept-Code in deine Zwischenablage zu kopieren.
Rezept in den X-Bar Editor einfügen
-
Wechsle in deiner Website zum X-Bar Editor.
-
Füge das kopierte Eyebrow – Pill 02 Rezept in den Bereich ein, in dem du deine Frontend-Rezepte verwaltest.
-
Speichere oder aktualisiere X-Bar, damit das Styling global auf deiner Website greift.
Pillen-Glow im Frontend prüfen
-
Aktualisiere die Seite mit deinem Kadence Advanced Heading Eyebrow im Browser.
-
Prüfe, ob der Eyebrow-Text nun in einer Pille mit 1px-Rahmen in deiner ersten Palettenfarbe sitzt und ein sanfter Innen-Glow zur Mitte hin ausläuft.
-
Teste dieselbe Eyebrow-Stelle in einem Browser oder auf einem Gerät mit eingeschränkten Effekten; dort sollte das Label als saubere Pille mit Kontur ohne Glow erscheinen.
Wenn alles korrekt verbunden ist, übernehmen deine Eyebrow-Labels diese Pillen-Glow-Behandlung automatisch überall dort, wo du die Klasse wpt-eyebrow verwendest.
Wie Eyebrow – Pill 02 funktioniert
Eyebrow – Pill 02 ist so aufgebaut, dass der Effekt wertig wirkt und gleichzeitig eng an dein Farbsystem gekoppelt bleibt. Der Rahmen nutzt deine erste Palettenfarbe, sodass die Pille immer zu deinem primären Brand-Ton passt.
In modernen Browsern ergänzt das Rezept einen radialen Verlauf, der diese Palettenfarbe an den Rändern der Pille konzentriert und zur Mitte hin transparent werden lässt. Dadurch entsteht der weiche Innen-Glow, der die Pille so wirken lässt, als würde sie sanft rund um den Rand leuchten.
Wenn ein Browser diesen Verlauf nicht so rendern kann, wie vorgesehen, fällt das Rezept auf eine Darstellung mit reinem 1px-Rahmen zurück. Der Eyebrow bleibt klar als pillenförmiges Label erkennbar – nur ohne Glow –, sodass das Design über unterschiedliche Umgebungen hinweg konsistent und gut lesbar bleibt.
Verwandte Rezepte und Ressourcen
Nutze diese Seiten, um weitere Eyebrow-Looks und den Rest der X-Bar CSS-Rezepte zu entdecken.
Alle CSS-Rezepte
Sieh dir den kompletten Katalog der X-Bar Frontend- und Editor-Rezepte an und erfahre, wie sie sich in deinem Designsystem kombinieren lassen.
Eyebrow – Pill 01
Eine einfachere Eyebrow-Pille, die sich auf eine saubere Kontur ohne Innen-Glow konzentriert und besonders gut für schlichte Layouts geeignet ist.
Eyebrow – Icon 01
Ergänze dein Design um einen ikonbasierten Eyebrow-Stil, der sich gut mit Pillen-Labels in Feature-Sektionen kombinieren lässt.
Last updated today
Built with Documentation.AI